Clever Geek Handbook

Polymer use 1.0: <iron-meta>

The correct use of the Polymer 1.0 element is <iron-meta>

confusing. Here is a link on Github . And here is a link to the Polymer demo site .

Can anyone please provide a correct example code on how to get it to work?

This is the code I have.

<dom-module id="generic-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: 'generic-element',
      properties: {
        test: {
          value: function(){
            return "Hello world"; // This is the only thing I can get to work so far.
         // return (new Polymer.IronMetaQuery({key: 'info'}).value); // Doesn't totally break.
         // All my other below attempts totally fail. Everything breaks.
         // return this.$.meta.IronMetaQuery({key: 'info'}).value;
         // return this.IronMetaQuery({key: 'info'}).value;
         // return this.$.meta.byKey('info').getAttribute('value');
         // return this.$.meta.byKey('info').value;
          }
        }
      }
    });
  })();
</script>

Here is the Github link . And here is a Github repository that contains the complete problem code in the context of a complete web application.

+3


source share


1 answer


The problem with your code is that you are trying to set a default property value for an element that was declared inside the same element template. Two things that happen between when an element is created and when that element is attached include a) setting default values ​​for properties; and b) the template is being prepared for stamping in the DOM. These tasks happen asynchronously, so you are essentially generating a race condition.

Try setting a test

default in the callback ready()

- the callback ready()

makes sure the DOM is ready to be accessed, which in your case is exactly where you declared yours <iron-meta>

.



<dom-module id="generic-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: 'generic-element',
      properties: {
        test: String
      },
      ready: function () {
        // this will work
        this.test = this.$.meta.byKey("info");
      }
    });
  })();
</script>

jsbin: http://jsbin.com/vosekiwehu/edit?html,output

+4


source






More articles:


All Articles