Rivets.js

Question

我在使用 Rivets.js 时遇到了一个奇怪的问题。我创建了 jsfiddle here 来归结这个问题。

如果连续点击底部的两个按钮（"Delete outer A"，然后"Delete inner 5"），一切正常。但是，如果您通过单击 "outer A" 文本框旁边的 "Delete" 按钮执行相同的操作，然后单击 "Delete" 文本框旁边的按钮"inner 5" 文本框，代码中断。单击第一个 "Delete" 按钮后检查第二个 "Delete" 按钮会发现最初附加到第二个 "Delete" 按钮的单击事件处理程序不再绑定。为什么模型更改时事件处理程序 "unbind itself"？

这是我的代码：

Javascript

// Create model
var myModel = [
    {
        "id" : "outer A",
        "inner" : [
            { "id" : "inner 1" },
            { "id" : "inner 2" }
        ]
    }, {
        "id" : "outer B",
        "inner" : [
            { "id" : "inner 3" },
            { "id" : "inner 4" },
            { "id" : "inner 5" }
        ]
    }
];

// Bind model to DIV using rivets
rivets.bind($('#sidebarDIV'), {myModel: myModel});

// Bind click handler: delete outer object
$('#deleteOuter_A').click(function(){
    console.log('delete outer');
    myModel.splice(0,1);
});

$('#deleteInner_5').click(function(){
    console.log('delete inner');
    myModel[0].inner.splice(2,1);
});

// Does not work
$('.deleteOuter').click(function(){
    console.log('delete outer');
    myModel.splice(0,1);
});

$('.deleteInner').click(function(){
    console.log('delete inner');
    myModel[0].inner.splice(2,1);
});

HTML

<div id="sidebarDIV">
    <div rv-each-sidebar="myModel" class="outerTab" rv-id="sidebar.id">
        <input rv-value="sidebar.id">
            <button class="deleteOuter">Delete</button>
            <div rv-each-inner="sidebar.inner" class="innerTab" rv-id="inner.id">
                <input rv-value="inner.id">
                <button class="deleteInner">Delete</button>
            </div>
            <br>
        </div>
    <button id="deleteOuter_A">Delete outer A</button>
    <button id="deleteInner_5">Delete inner 5</button>
</div>

Answer 1

您的样本很奇怪，因为它似乎按预期工作。

当您单击此按钮时 #deleteOuter_A 您的代码会拼接数组中的第一项。它做对了。

当您单击此按钮时 #deleteInner_5 您的代码会拼接数组中第一项的第三个内部项。它做对了。但是，您必须首先为数组中的第 0 项添加香料，因为该项 .inner 数组没有第三项。

当您单击此按钮时 .deleteOuter 您的代码会拼接模型中的第一项。它是做什么的。

当您单击此按钮时 .deleteOuter 您的代码会拼接模型第一项的内部数组中的第三项。这仅在数组中的第一项实际上有 3 项时有效。

如果这有帮助，请告诉我们。我将关闭您使用此回复打开的 this github issue。

Rivets.js - 模型更改时事件解除绑定

Rivets.js - events unbind when model changes

javascript

jquery