Search code examples
javascriptractivejs

Array modification dosn't work in Ractive JS

I'm trying to push item into array and it doesn't appear in HTML.

The example of code:

<script type="text/" id="tmpl">
<button on-click="create" type="button">Create</button>
{{#items}}{{.}},{{/items}}
</script>

<body>

<div id="container">
</div>

</body>

var model = {items: [1, 2, 3, 4]};

var ractive = new Ractive({
  el: "#container",
  template: "#tmpl",
  data: model
});

ractive.on("create", function() {
  model.items.push(7);
  console.log(model.items);
});

https://codepen.io/anon/pen/eWzJNR

What is wrong?

Solution

  • Magic mode and array modification is turned off by default in 0.8 and pending removal in 0.9 (they'll be done externally via an adaptor instead).

    For 0.8, you can manually set modifyArrays configuration to true. Alternatively, simply using Ractive's built-in array methods as mentioned in the comments should work provided that you have a reference to the instance.