当我追加到数组时，Ractive.js会追加或重新生成all吗

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

本文关键字：追加 新生 all Ractive 数组 js      更新时间：2023-09-26

模板

<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元素？这一点很重要，因为此数组可能包含数千个元素。全部重建非常缓慢，并且此数组将快速更新。

它将附加节点。可以通过标记节点（请参见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/)以及用于类似混洗操作的结账CCD_ 1。

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

相关文章：