Polymer 1.0：<iron-meta> 用法

Question

Polymer 1.0 元素<iron-meta> 的正确使用令人困惑。这是link on Github。这是Polymer demo site的链接。

有人可以提供一个正确的代码示例来说明如何使其工作吗？

这是我目前的代码。

<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>

这里是问题的Github link。这是一个Github repository，其中包含完整网络应用程序上下文中的完整问题代码。

Answer 1

您的代码的问题是您试图将元素属性的默认值设置为在同一元素的模板中声明的值。在元素创建和元素附加之间发生的两件事包括 a) 设置了属性的默认值； b) 模板经过准备，以被压印到 DOM 中。这些任务是异步发生的，所以本质上你正在生成一个竞争条件。

尝试在 ready() 回调中设置 test 默认值 - ready() 回调保证 DOM 已准备好被访问，在您的情况下，这正是您声明 <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