Question

我在Polymer中遇到了一些数组问题。我有一个类别数组，包含一系列项目。这些项目包含几个我想轻易改变的属性。对于此示例，我想切换item.enabled属性。这是模板布局：

<template is="dom-repeat" items="{{categories}}" as="category">
    <span>{{category.name}}</span>
    <template is="dom-repeat" items="{{category.items}}" as="item">
        <span>{{item.name}}</span>
        <span>{{item.enabled}}</span>
        <paper-icon-button icon="error" on-tap="toggleEnabled"></paper-icon-button>
    </template>
</template>

我希望toggleEnabled - 调用切换属于该类别的特定项目的enabled - 属性。

AFAIK，要更新item.enabled属性以便模板更新，我需要调用Polymer的set()方法。需要使用该项属性的路径（作为String）和值：

调用此方法

this.set('categories.x.items.y.enabled', !item.enabled)

在此调用中，x是category-index，y是item-index。这个问题是我不确定如何（有效地）从toggleEnabled调用中获取这两个参数。我知道如何获得该项目：

toggleEnabled: function(e) {
   var item = e.model.item;
}

但除了过度过滤之外，我不确定如何检索索引以更新项目的属性以更新模板。

我忽略了什么，最有效的方法是什么？

Answer 1

更新时间：2016-01-03

对于上述用例，最简单的方法是直接设置事件model对象。

抽头处理程序：

toggleEnabled: function (e) {
  e.model.set('item.enabled', !e.model.item.enabled);
}

如果有必要知道您的子属性所属的父，请将category-index绑定为图标按钮的属性;否则，替代方案需要dom-traversal，这会增加不必要的复杂性。

模板：

<template is="dom-repeat" items="{{categories}}" as="category" index-as="cat_index">
    <span>{{category.name}}</span>
    <template is="dom-repeat" items="{{category.items}}">
        <span>{{item.name}}</span>
        <span>{{item.enabled}}</span>
        <paper-icon-button cat-index$="{{cat_index}}" icon="error" on-tap="toggleEnabled"></paper-icon-button>
    </template>
</template>

抽头处理程序：

toggleEnabled: function (e) {

  var target = Polymer.dom(e).localTarget; // Normalize the event
  var cat = target.getAttribute('cat-index'); // The parent index
  var item = e.model.index; // Subproperty index

  // Do your stuff
  var enabled = this.categories[cat].items[item].enabled;
  this.set(['categories', cat, 'items', item, 'enabled'], !enabled);
  ...
}

按模型

1 个答案: