javascript - 在 Aurelia 的 Viewmodel 中更改对象后，字符串插值未更新

Question

我在 Aurelia 中的 View 中有一个元素，当其 Viewmodel 中的对象更新时，该元素没有更新。我已经看过有关 Pub/Sub 和事件聚合器的文档，但是这对于我想要做的事情来说似乎有点严厉，因为我不想在两个不同的资源之间进行通信，而只是在 View 及其 View 模型内进行通信.

当Viewmodel中的对象发生变化时，我不知道如何正确更新(或触发更新)View中的字符串插值。

我的代码如下

myview.html

<h1>My List</h1>
<ul>
    <li repeat.for="group of modelObject.groups">
        <span>${group.id}</span>
        <span repeat.for="state of group.region">${state}</span>
    </li>
<ul>
<button click.delegate(editModelObject())>Edit</button>

myviewmodel.js

constructor()
{
    this.modelObject = {
        <other stuff>,
        "groups": [
            {
               "id": "default",
               "regions" : ["NY", "CT", "NJ"]
            },
            {
               "id": "west",
               "regions" : ["CA", "OR"]
            }
        ],
        <more stuff>
    }
}

editModelObject() {
    <something that updates both the id and regions of a group in this.modelObject>
}

由于某种原因， View 中的状态正确更改，但 id 却没有。我是否需要使用 Pub/Sub 之类的东西才能使双向绑定(bind)正常工作？还是我遗漏或做错了一件简单的事情？

Answer 1

如果您更改数组对象之一的属性，则此方法有效。但是，如果您分配数组的索引之一，则这不起作用，因为这需要脏检查。请参阅https://github.com/aurelia/binding/issues/64

要解决您的问题，您应该使用 splice() 而不是索引赋值。例如:

const newItem = { id: 77, name: 'Test 77', obj: { name: 'Sub Name 77' } };
//instead of this.model.items[0] = newItem; use below
this.model.items.splice(0, 1, newItem);

运行示例https://gist.run/?id=087bc928de6532784eaf834eb918cffa