3

Polymer 1.0 元素的正确使用<iron-meta>令人困惑。这是Github 上的链接。这里是Polymer 演示站点的链接。

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

这是我到目前为止的代码。

<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 链接。这是一个Github 存储库，其中包含完整 Web 应用程序上下文中的完整问题代码。

4

1 回答 1

4

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

尝试test在回调中设置您的默认值ready()-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，输出

于 2015-07-07T08:27:21.303 回答