Search code examples
javascriptjqueryarraysjsonractivejs

Updating an array on RactiveJS

I am working with RactiveJS and I have a problem when work with arrays, This is my initial configuration:

JSFIDDLE: http://jsfiddle.net/18fccpnj/

var ractive = new Ractive({
  el: 'container',
  template: '#template',

  // Here, we're passing in some initial data
data: { students: [
    {name: "Miguel Crespo", note: 5}
]}

});

And I have a button on my html that fire an event

<button on-click="charge">Cargar otro</button>

This is the event handle:

ractive.on("charge", function(){
ractive.set("students", [
    {name: "Miguel Crespo", note: 5}, 
    {name: "Pedro Perez", note: 3}
]);
});

This call never update the view and I do not know why, because in the official page an example like this works!

I appreciate your help.

Solution

  • Using static delimiters for the block [[#each students:num]] is declaring that it will not be updated after initial render. Change them to {{#each students:num}} and it works fine (see http://jsfiddle.net/18fccpnj/4/).

    There's also no need to reset the data on the entire array, you can just push the new member:

    ractive.push("students", {name: "Pedro Perez", note: 3});