Search code examples
javascriptarraysmustacheractivejs

Ractive.js index doesn't appear to be reactive

Please see this jsfiddle (adapted forked from one by Rich Harris):

http://jsfiddle.net/upgu2tq3/29/

I'm trying to remove an item by index from the 'Posts' keypath. I'm able to do this using the built in splice method. It behaves just like a normal Array.splice. splice(array,startIndex,numberOfItemsToRemove)

 {{#each Posts:i}}
    <button on-click="splice('Posts',i,1)">Remove {{i}}</button>
 {{/each}}

This does the job of removing the item from the keypath. However, upon removal, the value of {{i}} (next to 'Remove') doesn't appear to update.

I've labelled the posts 'Post 0', 'Post 1' etc.. to match up with the index.

It looks like its being iterated by numeric index (from 0 to length-1)? Just the template doesn't seem to update the index when the array is altered. I've checked the length after an item has been removed - its reduced...

I'm just a little confused by this.

Solution

  • It's working as expected.

    The index will change after splicing. You can see the button label change after clicking the remove button.

    You are getting confused because you have hard-coded the content to "Post 0" etc. The content will not change because the index changed.

    If you want it to change then change {{Text}} to Post {{i}}