聚合物按模型更新数组子属性

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() 方法。需要使用该项目属性的路径（作为字符串）和值来调用此方法：

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

在此调用中，x 是类别索引，y 是项目索引。这个问题是我不确定如何（有效地）从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 遍历，这会增加不必要的复杂性。

模板：

<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);
  ...
}