Question

目标

我想将selected属性in this element数据绑定到DOM（<div>[[selected]]</div>）。

选择状态（如“德克萨斯”）后，我希望状态名称出现在“科罗拉多州，南达科他州”（<div>[[selected]]</div>标签内）的预选状态旁边的左上角。但相反，它没有。

问题

这里发生了什么？如何成功将DOM数据绑定到selected属性？并且在每个选择和取消选择的新状态下自动更新DOM。

重现问题

请按照以下步骤操作：

Open this jsBin。
观察预先选定的州是科罗拉多州和南达科他州。
注意Colarado和South Dakota列在左上角。
点击德州。
观察图表中选择的德克萨斯州。
❌请注意，左上角的所选州列表中包含德克萨斯州 的状态 。即，<div>[[selected]]</div>
单击标有“显示值”的按钮，并在控制台中观察“{1}}阵列中包含”Texas“。

使用.slice（）崩溃的尝试解决方案

This SO answer explains why mutated arrays are not directly observable by the Polymer object。

...你正在做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
},

Answer 1

如果要绑定数组，则必须使用dom-repeat。

<template is="dom-repeat" items="[[selected]]">[[item]] </template>

MPI_Win_allocate_shared()

Answer 2

dom-repeat的格式不支持正确使用逗号分隔符。所以我改为使用了计算属性字符串。

http://jsbin.com/ruduwavako/1/edit?html,console,output

<div>[[selectedString]]</div>
...
selectedString: {
  type: String,
  computed: '_computeSelectedString(selected.length)',
},
...
_computeSelectedString: function(selectedInfo) {
  return this.selected.sort().join(', ');
},

Answer 3

数据绑定数组可能很棘手。

So here is a complete implementation example

http://jsbin.com/xonanucela/edit?html,console,output

DbContext

Polymer 1.x：数据绑定阵列

目标

问题

重现问题

使用.slice（）崩溃的尝试解决方案

来源

3 个答案: