如何将对象/数组的子对象动态绑定到元素

【问题标题】：How to bind a child of an object / array dynamically to an element如何将对象/数组的子对象动态绑定到元素
【发布时间】：2016-12-26 12:49:46
【问题描述】：

比方说，我们有一个元素通过简单的双向绑定到子属性：

<x-element data="{{model.partOfData1}}"></x-element>

是否可以动态更改零件partOfData1？我想做的是这样的：

<x-element data="{{model[whichPartOfData]}}"></x-element>

而whichPartOfData 将是指向model 中的数组的指针。我有很多用例，但很难找到解决方案。归档此文件的最佳方式是什么？

【问题讨论】：

标签： polymer polymer-1.0 web-component

【解决方案1】：

您可以创建一个计算绑定，它将模型和属性键作为单独的参数：

<x-element data="[[getData(model, propertyName)]]"
           on-data-changed="updateModel"></x-element>

Polymer({
  is: 'x-element',
  getData: function(model, key) {
    return model[key];
  },
  updateModel: function(ev) {
    this.model[this.propertyName] = ev.detail.value;
  }
});

如果是常见情况，您可以将getData 函数提取到behaviour。

要实现双向绑定，您必须手动监听data 属性的变化。毕竟数据绑定主要是事件和监听器。我意识到，虽然在这一点上解决方案有点麻烦。

【讨论】：

谢谢！ :) 我试过了，但我正在寻找一种双向绑定的解决方案。（我将此添加到问题中。对不起。）
查看更新的答案。不过肯定有更好的方法。