Question

我遇到了Rivets.js的一个奇怪问题。我创建了jsfiddle here来解决这个问题。

如果连续点击底部的两个按钮（“删除外部A”，然后“删除内部5”），一切正常。然而，如果您通过单击“外部A”文本框旁边的“删除”按钮，然后单击“内部5”文本框旁边的“删除”按钮执行相同的操作，代码中断。单击第一个“删除”按钮后，检查第二个“删除”按钮，显示最初附加到第二个“删除”按钮的单击事件处理程序不再绑定。为什么在模型更改时事件处理程序“解除绑定”？

这是我的代码：

的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 - 模型更改时取消绑定的事件

1 个答案: