Question

我是Polymer的新手，我试图使用我的命名范围的索引隐藏自定义元素中的表行。它根本不起作用，我怀疑我没有走上正轨。有人可以解释我应该做什么吗？此外，可以在元素类名称和ID中使用{{index}}吗？

<link rel="import" href="bower_components/polymer/polymer.html">
<polymer-element name="task-lists" attributes="name">
    <template repeat="{{t in tasks}}">
        <template repeat="{{t, tindex in tasks}}">
            <table>
                <tr id="{{tindex}}">
                    <td>
                        <input type="checkbox" id="task1" class="checkBox" value="None" name="check" />
                        <label for="task1"></label>
                        <span on-click="{{hideLink}}">{{t.name}}</span>
                    </td>
                </tr>
            </table>
        </template>
    </template>

    <script>
        Polymer('task-lists', {
            ready: function () {
                this.tasks = [
                    {name: 'Painting'},
                    {name: 'Cleaning'}
                ]
            },
            hideLink: function () {
                var row = document.getElementById("{{tindex}}");
                row.display = 'none';
            }
        })
    </script>
</polymer-element>

Answer 1

第一期：

您无法直接在事件处理程序中访问模型属性。请查看文档中的Event handling and data binding。您必须访问与创建事件的模板实例关联的模型。您的事件处理程序将如下所示：

hidelink: function (e) {
  var tindex = e.target.templateInstance.model.tindex;
  ...
}

第二期：

document.getElementById仅搜索主文档中的元素（轻量级DOM），但您要查找的元素位于元素的影子DOM中，因此您必须使用this.shadowRoot.getElementById。< / p>

在具有命名范围的自定义Polymer元素中隐藏表行

1 个答案: