Demo to illustrate data binding inside generic element?

[veronicawwashington]

Shouldn't the demo illustrate binding an <iron-meta> variable inside a generic custom element? That use case seems to better reflect the intended purpose of the <iron-meta> element.

Example: (maybe something like this...)

<dom-module id="custom-element">
  <style>...</style>
  <template>
    <iron-meta id="meta" key="info" value="foo/bar"></iron-meta>
    The <code>value</code> stored at <code>key="info"</code>
    is <code><span>{{test}}</span></code>.  
  </template>
</dom-module>
<script>
  (function() {
    Polymer({
      is: 'custom-element',
      properties: {
        test: String
      },
      ready: function() {
        this.test = this.$.meta.byKey("info");
      }
    });
  })();
</script>

I am just learning Polymer so I am probably just missing something or doing something dumb.

[akc42]

I've been playing with putting some tags on a page and using databinding. The trouble is, you can put data in using databinding, but you can't get it out again. I tried stepping through the code to find out why, and it never appears to write the value back to the value attribute, so although it has notify:true on it, the value is put into the meta data and that is as far as it goes.

Of course, as per the docs, you can imperatively query it in code.

I think one way of doing it might be to use <iron-meta-query key="[[binding]]", value="{{anotherbinding}}"> - if you change the key value, it then outputs the correct value for the new key - but it seems messy.

[akc42]

Having found that iron-meta did not appear to work with data binding, I have built my own version (akc-meta) that seems to work well with data binding. This keeps a list of query elements with a particular key in shared storage, so when the value changes on the input element, it sends a new value out to all the query elements in that list, writing it back to the value property. This has the notify:true flag, so gets passed into the data binding system.

See https://github.com/akc42/akc-meta

[albertolobrano]

you can use iron-meta to store the value you want to share and iron-meta-query to query it and bind to an object.

for instance: in one component you define

  <iron-meta key="user" value="{{user}}"></iron-meta>

in another component you can access it simply doing

<iron-meta-query key="user" value="{{_user}}"></iron-meta-query>

the user is {{_user.name}}

[notwaldorf]

@veronicawwashington Would you be interested in sending a PR to update the demo? It would be much appreciated! 🍰

[safizn]

2 way binding ! A feature still needed, I think for the lack of Global Polymer Attributes/Variables which support data binding.