当我追加到数组时，Ractive.js 会全部追加或重建吗？

Question

模板

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

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

</script>

JS

<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>

如果我像这样附加到数组：

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

ractivejs 如何渲染附加元素？全部重建还是只附加一个新的 dom 元素？这很重要，因为这个数组可能包含数千个 element.Rebuild 一切都很慢，这个数组会很快更新。

Answer 1

它将追加节点。您可以通过标记节点（参见 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'));

它也适用于拼接（http://jsfiddle.net/4j6xzbwv/1/) and checkout ractive.merge 用于类似随机播放的操作。

Ractive 在重新使用 DOM 节点方面也很聪明，如果你确实设置了一个新数组。您可以在 http://jsfiddle.net/4j6xzbwv/2/ 中看到 DOM 节点如何被新数组重用，因为只需要更新文本节点内容

当我追加到数组时，Ractive.js 会全部追加或重建吗？

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

javascript

jquery

ractivejs