我想将selected
属性in this element数据绑定到DOM(<div>[[selected]]</div>
)。
选择状态(如“德克萨斯”)后,我希望状态名称出现在“科罗拉多州,南达科他州”(<div>[[selected]]</div>
标签内)的预选状态旁边的左上角。但相反,它没有。
这里发生了什么?如何成功将DOM数据绑定到selected
属性?并且在每个选择和取消选择的新状态下自动更新DOM。
请按照以下步骤操作:
<div>[[selected]]</div>
This SO answer explains why mutated arrays are not directly observable by the Polymer object。
@ScottMiles写道:...你正在做Polymer无法看到的工作(即数组操作),然后让
selected
弄清楚发生了什么。但是,当您调用set
时,Polymer看到this.set('selected', selected);
的标识未发生更改(即,它与之前的Array对象相同),它只是停止处理。
所以我试图通过在原始数组上使用selected
方法创建一个新数组来解决问题,如下所示。
.slice()
这似乎解决了可观察性问题但会产生副作用问题并导致调用堆栈崩溃。
// Sort new 'selected' array
_selectedChanged: function(selectedInfo) {
var selected = this.selected.slice();
selected.sort();
//this.set('selected', selected); // Uncommenting this line crashes call stack
},
答案 0 :(得分:1)
如果要绑定数组,则必须使用dom-repeat。
<template is="dom-repeat" items="[[selected]]">[[item]] </template>
答案 1 :(得分:0)
dom-repeat
的格式不支持正确使用逗号分隔符。所以我改为使用了计算属性字符串。
<div>[[selectedString]]</div>
...
selectedString: {
type: String,
computed: '_computeSelectedString(selected.length)',
},
...
_computeSelectedString: function(selectedInfo) {
return this.selected.sort().join(', ');
},
答案 2 :(得分:0)
数据绑定数组可能很棘手。
So here is a complete implementation example
http://jsbin.com/xonanucela/edit?html,console,outputDbContext