动态节点的自动节点查找（dom-重复）Polymer 1.0

Question

在下面的示例中，我希望能够使用属性 'first' 和 select 稍后使用函数“_dummy”设置 id。下面的代码不起作用，我不知道为什么。我按照 doc 中的说明进行操作。有人可以找出问题所在吗？

<dom-module id="my-positions-list">
  <template>

    <div> Employee list: </div>
    <template is="dom-repeat" items="{{employees}}">
        <div id$="{{item.first}}">{{_dummy(item)}}</div> 
        <div>First name: <span>{{item.first}}</span></div>
        <div>Last name: <span>{{item.last}}</span></div>
    </template>

  </template>

  <script>
    Polymer({
      is: 'my-positions-list',
      _dummy: function(item){
        var elem = this.$$("#"+item.first); // returns undifined
        console.log(elem);
      },

      ready: function() {
        this.employees = [
            {first: 'Bob ', last: 'Smith', country: 'united states'},
            {first: 'Sally', last: 'Johnson', country: 'united kingdom'}
        ];
      }
    });
  </script>
</dom-module>

Answer 1

我认为模板是在本地影子中构造的 dom 并且 _dummy 在附加到更高级别 dom 以供 querySelector 或 querySelectorAll 使用之前被调用。

Answer 2

您需要将员工添加到具有默认值的属性。您正在选择一个刚刚创建的节点。您需要等待本地 dom 准备好使用您的 _dummy 函数。使用 ready 函数到达你想要的节点。并考虑适当的 ID（例如，没有大写字母）。对于此类问题，您应该查阅聚合物生命周期的文档 (https://www.polymer-project.org/1.0/docs/devguide/registering-elements.html)

<dom-module id="my-positions-list">
    <template>

        <div> Employee list: </div>
        <template is="dom-repeat" items="{{employees}}">
            <div id="{{item.first}}"></div>
            <div>First name: <span>{{item.first}}</span></div>
            <div>Last name: <span>{{item.last}}</span></div>
        </template>

    </template>

    <script>
        Polymer({
            is: 'my-positions-list',
            properties: {
                employees: {
                    type: Array,
                    value: function() {
                        return [
                            {first: 'Bob', last: 'Smith', country: 'united states'},
                            {first: 'Sally', last: 'Johnson', country: 'united kingdom'}
                        ];
                    }
                }
            },
            attached: function() {
             this.async(function() {
                   console.log(this.$$("#Bob"));
             });
            }
        });
    </script>
</dom-module>

动态节点的自动节点查找（dom-重复）Polymer 1.0

Automatic node finding for dynamic nodes (dom-repeat) Polymer 1.0

polymer

polymer-1.0