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元素？这很重要，因为这个数组可能包含数千个元素.Rebuild all非常慢，而且这个数组会很快更新。

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/）和结帐ractive.merge，用于类似随机播放的操作。

如果您设置了新阵列，Ractive也会重新使用DOM节点。您可以在http://jsfiddle.net/4j6xzbwv/2/中看到新阵列如何重用DOM节点，因为只需要更新文本节点内容

当我追加到数组时，Ractive.js会附加还是重建所有内容？

1 个答案: