Question

我想知道Ractive生成的DOM元素何时准备就绪。在我的例子中，我想使用jquery将自动完成函数附加到元素上。理想情况下它会是这样的：

模板：

{{#list}}
<input type="text" proxy-load="attach-typeahead">
{{/list}}

使用Javascript：

ractive.on("attach-typeahead", function(event){
    $(event.node).typeahead(...);
})

但即使我记得在文档中某处提到代理加载，事件也永远不会触发。做我正在做的事情的正确方法是什么？感谢。

Answer 1

Codler的答案很明显 - 转换可用于将行为附加到节点（并使用outro将其分离）。

从最新的（0.3.8）版本开始，还有另一种方法，其行为类似，但为此目的稍微简化：装饰器。

文档尚未编写（我的错误），但您可以看到typeahead decorator here。装饰器只是一个节点被添加到DOM时被调用的函数，它返回一个带有teardown()方法的对象，一旦从DOM中删除节点就会调用该方法。

你可以像这样在全球范围内提供装饰：

Ractive.decorators.foo = function ( node ) {
  // do some setup work with the node here...

  return {
    teardown: function () {
      // do any necessary cleanup here
    }
  };
};

或者您可以指定每个实例装饰器，如小提琴。

Another decorator example here，这次是一个可排序的列表。

Answer 2

在ractive的文档中提到了代理事件here。您的示例不起作用，因为input元素没有本机加载事件。

所有ractive函数都有一个完整的函数回调，在渲染完成时会触发。也许你可以使用它。

Answer 3

您可以使用intro属性。这是一场狂热的过渡。创建DOM时，将调用intro。您可以在此处找到更多信息https://github.com/RactiveJS/Ractive/wiki/Transitions

Ractive的代理加载如何工作？

3 个答案: