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

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

对于above-mentioneduse-case，最简单的方法是直接设置事件model对象。

tap-handler:

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

如果需要知道您的子属性属于哪个 parent，请将 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>

tap-handler:

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

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

Polymer updating array subproperty by model

arrays

polymer

polymer-1.0