检测阵列突变

Question

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

在我的问题中，我使用array mutation methods 来更改包含购物项目列表的数组。

但是，这似乎没有按预期工作。我确实在dom-repeat 和打印数组长度时得到了更改。 但是当我打印数组本身或将其包装在函数中时，我没有收到更改事件。

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

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

为什么这不起作用？

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

另外，当我取消注释以下行（在 JSBin 中）时，事情似乎像 indened 一样工作。但我不喜欢它，因为它有点 hackish。

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

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

---

编辑

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

然而，人们可能会争论这是否可行。是的，变量list 不会改变本身。但是将[[list]] 放入HTML 代码实际上会触发toString()。并且那个函数的结果已经改变了。

我想我现在只能捎带length 属性...

Answer 1

正如在 cmets 中提到的，notifyPath 和 slice 调用正在创建数组的浅表副本并将不同的引用分配回 list 变量 - 触发绑定更新。如果不维护一个单独的 (watchable) 变量或搞乱对象引用，我能想到的唯一其他解决方法是搭载 list.length 属性而不是列表本身并通过它某种“格式化”功能。 例如

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

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

» Fiddle

---

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

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

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

» Fiddle