ractivejs - Remove the first item on click in Ractive.js -

i have list of 4 items , need remove first item every time button clicked. implemented simple solution based on splice method seems work on first click. further click doesn't change thing.

here html:

<script type="text/ractive" id="template1">     {{#each posts}}     <div style="background-color: red">{{text}}</div>     {{/each}}     <button on-click="removefirst">remove first</button> </script>  <main></main> 

, javascript:

var ractive1 = new ractive({     template: '#template1',     el: 'main',     data: {         posts: [ {text: "post 1"}, {text: "post 2"}, {text: "post 3"}, {text: "post 4"} ],         } });  ractive1.on({         removefirst: function() {             ractive1.splice('posts', 0, 1, []);         } }); 

and jsfiddle demo.

when call splice on array, first argument index start removing elements, second argument number of elements remove, , all rest items insert array @ same location. you're doing when call array.splice(0, 1, []) replacing first item empty array, instead of removing it.

ractive's array mutation methods follow same form, except first argument 'keypath' of array. if this...

ractive1.splice('posts', 0, 1); 

...it works correctly.