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;