聚合物 1.0：<iron-meta> 用法

Question

Polymer 1.0 元素的正确用法 <iron-meta> 令人困惑。这是 link on Github. And here is the link to the 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 to the issue. And here is a 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

聚合物 1.0：<iron-meta> 用法

Polymer 1.0: <iron-meta> usage

web-component

polymer

custom-element

polymer-1.0