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

EN

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