Will Ractive.js append or rebuild all when I append to array?

Template

<script id='template' type='text/ractive'>
    <p>Hello, {{name}}!</p>

    {{#each items:num}}
    <li>#{{num}} {{items[num]}}</li>
    {{/each}}

</script>

<script>
  window.r = new Ractive({
    // The `el` option can be a node, an ID, or a CSS selector.
    el: '.reactivejs',

    // We could pass in a string, but for the sake of convenience
    // we're passing the ID of the <script> tag above.
    template: '#template',

    // Here, we're passing in some initial data
    data: {name: 'world',items:["Food","Tools","Human"]}
  });
</script>

If I append to array like this:

r.get("items").push("Somthing")

How ractivejs render the appended element ? rebuild all or just append a new dom element ? This is important because this array may contain thousands element.Rebuild all is very slow, and this array will update quickly.

Solution

It will append the node. You can that by tagging the nodes (see http://jsfiddle.net/4j6xzbwv/):

var length = 10;
var arr = new Array(length);
while(length--){
    arr[length] = 'item' + length;
}

var r = new Ractive({
    el: document.body,
    template: '#template',
    data: {
        list: arr
    }
})

var tags = document.querySelectorAll('p');

length = tags.length;
while(length--){
    tags[length].setAttribute('data-tagged', true);
}

r.push('list', 34);

console.log(document.querySelectorAll('p[data-tagged=true]').length, r.get('list.length'));

It also works with splice (http://jsfiddle.net/4j6xzbwv/1/) and checkout ractive.merge for shuffle-like operations.

Ractive is also smart about reusing the DOM nodes if you do set a new array. You can see in http://jsfiddle.net/4j6xzbwv/2/ how the DOM nodes are reused by the new array, as only the text node content needs to be updated