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

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