splice wrongly removes last item when using components

124 Views Asked by At

I'm using Rivets.js to draw some components within an rv-each-* block

They all render fine when the page loads. When I Splice the first element of the model, the model correctly removes the first element but the rv-each-* block removes the last element.

The component is just made up of a button that contains the text of the objects value it is bound to. Next to each component call I print some text that is also bound to each objects value. The two should be the same, but after the Splice they are not.

var model2 = [{ "value":"1"},{"value":"2"},{"value":"3"}];

rivets.components['control'] = {
    template: function() {
        return '<button>{data.option.value}</button>';
    },
    initialize: function(el, attributes) {
        return new controlviewmodel(attributes);
    }
};

function doSplice()
{
    model2.splice(0,1);
}

<table id="view">
<tr rv-each-option="model">
    <td>
        <control option="option"/>
    </td>
    <td>{option.value}</td>
</tr>
</table>

I've created a fiddle to try and show my problem: http://jsfiddle.net/dko9b9k4/

Am I doing something wrong or is this a bug?

Edit: this example can be fixed by changing

return new controlviewmodel(attributes);

to return attributes;

0

There are 0 best solutions below