检测阵列突变

Question

我制作了一个简单的概念验证的Polymer 1.0应用程序，它演示了我的问题： JSBin 。

在我的问题中，我正在使用数组突变方法来更改包含购物清单的数组。

但是 ，这似乎没有达到预期的效果。 当打印数组的长度时，我确实在dom-repeat有所更改。 但是，当我打印数组本身或将其包装在函数中时，我没有得到change事件。

简而言之，为什么这样做？

<p>Number of items: [[list.length]]</p>

而为什么这不是工作？

<p>Items inline: [[list]]</p>    
<p>Observe function : [[_observe(list)]]</p>

另外 ，当我取消注释下面的行（在JSBin中）时，事情似乎正常进行。 但我不喜欢它，因为它有点破烂。

app.notifyPath('list', app.list.slice());

我通过阅读此问题偶然发现了slice()修复程序： https : //github.com/Polymer/polymer/issues/2068

---

编辑

因此，在评论之后，问题“这是设计使然”的答案是“是”。 数组本身不会改变（因为它只是一个引用），但是它的属性会改变。 这就是slice()强制重新加载的原因，因为它创建了浅表副本。

但是 ，有人可能会争论这是否可以。 是的，变量list不改变本身 。 但是将[[list]]放入HTML代码实际上会触发toString() 。 并且该功能的结果已更改。

我想我现在暂时背负着length属性...

Answer 1

正如注释中提到的， notifyPath和slice调用正在创建数组的浅表副本，并将不同的引用分配回list变量-触发绑定的更新。 在没有维护单独的（可观察的）变量或弄乱对象引用的情况下，我能想到的唯一其他解决方法是list.length属性而不是列表本身，并通过某种“格式”功能传递它。 例如

<p>Items inline: [[format(list.length)]]</p>

app.format = function(){
    return app.list.toString();
};

»小提琴

---

正如@zb所指出的，您可以对此进行扩展，并通过将相关变量作为参数传递，从而使该函数可在任何数组中重用：

<p>Items inline: [[format(list, list.length)]]</p>

app.format = function(list){
    return list.toString();
};

»小提琴