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

我遇到了一个关于铆钉的奇怪问题。我创建了JSFIDLE来简化这个问题

如果您依次单击底部的两个按钮删除外部A，然后删除内部5，则一切正常。但是，如果通过单击外部A文本框旁边的删除按钮，然后单击内部5文本框旁边的删除按钮来执行相同的操作，则代码将中断。单击第一个删除按钮后检查第二个删除按钮，会发现最初附加到第二个删除按钮的单击事件处理程序不再绑定。为什么在模型更改时事件处理程序会自动解除绑定

这是我的密码：

Javascript

HTML

---

你的样品很奇怪，因为它似乎像预期的那样工作

当您单击此按钮时，您的代码会将第一项从数组中剪接出来。这是正确的

当您单击此按钮deleteInner_5时，您的代码将其从数组中的第一项拼接到第三个内部项。这是正确的。但是，您必须首先添加数组中的第0项，因为该items.internal数组没有第三项

当您单击此按钮时。删除外部代码使其从模型中拼接第一个项目。确实如此

当你点击这个按钮时，你的代码将从模型第一项的内部数组中拼接第三项。只有当数组中的第一个项实际上有3个项时，这才有效

请让我们知道这是否有帮助。

---

我将用这个回答来结束你的开场白

格雷格——让我感到困惑的是，这两个过程应该产生相同的结果，但事实并非如此。步骤1是：单击删除外部A按钮，然后单击删除内部5按钮。过程2是：单击外部A旁边的删除按钮，然后单击内部5旁边的删除按钮。第二个过程失败，因为在单击外部A旁边的删除按钮后，绑定到内部5旁边的删除按钮的单击事件解除绑定。我想弄明白的是，为什么这件事会被解开。这有意义吗？我创建了一个修改过的小提琴，使问题更加明显。这也是意料之中的，你已经约束了所有的听众。目前，铆钉绑定迭代器的方式与。这意味着，如果删除数组中的第一项，它实际上会删除最后一项，然后使用第二项中的数据重新绑定第一项。这就是为什么第二个移除内部按钮stull有效，而第三个无效。第三个按钮是新的，在初始jquery事件注册时不在DOM中。我们正计划实施的每一个活页夹更像我的第一个这样的回答，所以很抱歉的混乱。如果查看铆钉源，您应该注意到，如果绑定数组的长度减少，铆钉将解除绑定数组末端的模型，直到长度匹配为止。然后铆钉将迭代并重新绑定现有项。铆钉有一个on-*活页夹，如果使用该活页夹，将确保始终正确订阅活动。有关使用on-*活页夹的更改，请参见。

// 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);
});

<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>