Question

我一直在玩RivetsJS，它完美运行直到我重新分配我最初用作模型的对象。例如，我一直在JSFiddle中尝试以下内容：

JavaScript的：

var testObject = {
    prop1: "ONE",
    prop2: "TWO"
};

var testObject2 = {
    prop1: "THREE",
    prop2: "FOUR"
}

var testBind = rivets.bind($("#properties"), {
    test: testObject
});

$("#randomize").click(function(e) {
    testObject.prop1 = Math.random();
    testObject.prop2 = Math.random();
});

$("#change").click(function(e) {
    testObject = $.extend(true, {}, testObject2);
});

HTML：

<div id="properties">
    <p>Prop1: { test.prop1 }</p>
    <p>Prop2: { test.prop2 }</p>
</div>

<button id="randomize">Randomize</button>
<button id="change">Change</button>

这首先很有效。网页显示“ONE”和“TWO”，当我点击随机化时，它们会显示随机值。但是，当我单击“更改”时，没有任何反应，当我单击“随机化”时，元素将停止更新。

我想在单击“更改”时再次尝试取消绑定和绑定，但这也不起作用。

Here's the JSFiddle

Answer 1

他们有专门的功能，你可以参考github讨论这个问题 https://github.com/mikeric/rivets/issues/131

你现在可以简单地写这个

var otherTestObject = { test2: { prop1: "THREE", prop2: "FOUR" } }; testBind.update(otherTestObject);

Answer 2

我有同样的问题。我认为它使用对象引用跟踪对象，因此当您重新分配整个对象时，它将停止工作。

这个Filddle有效，因为我们没有重新分配父对象。 http://jsfiddle.net/a9hFk/2/

var testObject = {
    test2: {
        prop1: "ONE",
        prop2: "TWO"
    }
};

var testObject2 = {
    prop1: "THREE",
    prop2: "FOUR"
}

var testBind = rivets.bind( $("#properties"), {
    test: testObject
});

$("#randomize").click(function(e) {
    testObject.test2.prop1 = Math.random();
    testObject.test2.prop2 = Math.random();
});

$("#change").click(function(e) {
    testObject.test2 = $.extend(true, {}, testObject2);
});

重新分配模型后，RivetsJS不会更新

2 个答案: