Ractivejs装饰初始化不一致(Ractivejs decorator inconsistent

REF： http://jsfiddle.net/ffmqd0zz/

HTML：

<div id='books_container'/>

<script type='ractive/template' id="books">
  {{#books}}
  <div decorator='decoration' id="{{id}}">
      <span> title: {{ title }}</span>
      <span> id: {{ id }}</span>
  </div>
  {{/books}}
</script>

JavaScript的：

var MyDecorator = function(node) {
    console.log("init MyDecorator for id: " + $(node).attr('id'));
    return { teardown: function() {}};
};

var books = new Ractive({
    el: '#books_container',
    template: '#books',
    data: {books: [{"id": 1174,"title": "franny and zoey"},
                   {"id": 1175,"title": "moby duck"}]},
    decorators: { decoration: MyDecorator }
  });

console.log("init complete")

books.set('books', [{"id": 1176,"title": "life, the universe and stuff"},
                    {"id": 1177,"title": "yellowbrick road"},
                    {"id": 1178,"title": "grapes of wrath"} ]);

注意装饰初始化登录到控制台。

当Ractive被初始化，在“书籍”列表中的两个初始项正确装饰，通过的console.log消息所示。 然而，当列表与改变“books.set（）”，Ractive只有装饰名单上的第三个项目，以及书籍ID 1176和1177都没有初始化的装饰。

这似乎是由刚刚初始化第三，补充说，项目的装饰，跳过前两个，即使他们已经被替换优化性能。

难道我做错了，或者这是一个错误？ 而且可以有人提出一个解决办法，请。

提前致谢

Answer 1:

Ractive只会更新的东西改变。 随着节点的列表（ {{each}}有用于更新两种策略：

1. 像推或剪接外显阵列修饰（或合并）产生相同的DOM节点修改 - 意味着DOM节点被原封不动如果不修改，否则删除或插入。
2. 设置阵列重新使用DOM节点，但即使在这种情况下，只有改变过将与各列表项的结构进行更新。

所以对于装修，如果他们有没有参数Ractive不会更新它们。 每一种方式来改变这一个参数添加到您的装饰：

<div decorator='decoration:{{id}}' id="{{id}}">

现在，装饰器将被拆除，如果它依赖于变化的数据（见重新初始化http://jsfiddle.net/ffmqd0zz/2/ ）。

不知怎的，文档尚未更新， 但你也可以添加一个update的方法，将代替装饰上的参数值的变化是torndown的叫你的装饰返回参数：

var MyDecorator = function(node, title) {
    console.log('new decorator', title);
    function tooltip( title ) {
        node.title = title;
    }

    return { 
        teardown: function() {},
        update: function( title ) {
            tooltip(title);
        }
    };
  };

看到http://jsfiddle.net/ffmqd0zz/3/

Answer 2:

作为一种变通方法，您可以弹出，推动在一个时间数组中的元素之一。 查看完整的例子 。 相关的代码：

books.pop('books');
books.pop('books');

books.push('books', {"id": 1176,"title": "life, the universe and stuff"});
books.push('books', {"id": 1177,"title": "yellowbrick road"});
books.push('books', {"id": 1178,"title": "grapes of wrath"});

我不知道，如果你看到的行为是由于错误或不。 就像你说的，它可能是Ractive优化性能。 一个告诉珍闻从Ractive文档 ：“指令只是指令Ractive -他们实际上并不被添加到该元素的属性。”

文章来源: Ractivejs decorator inconsistently initialized