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);
Comments
Post a Comment