polymer 1.0 : usage

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 中。这些任务异步发生，因此本质上您正在生成竞争条件。

尝试设置您的test ready() 内的默认值回调 - ready()回调保证 DOM 已准备好被访问，在您的情况下，这正是您声明 <iron-meta> 的位置。 key 。

<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