Question

我试图将IScroll库包装到Ractive组件中。有没有办法在组件的DOM更改并完成任何转换时得到通知，以便我可以更新滚动条？我看到了以下方法来实现这一目标：

明确声明（组件模板的）依赖关系，例如
```
<Scroll context="{{...}}" > </Scroll>
```
我可以观察context变量，但仍然无法等待过渡完成。
修补Ractive.set（），以便在使用时发出自定义事件：
```
// Broadcast promise returned by `set`.
var oldset = Ractive.prototype.set;
Ractive.prototype.set = function () {
  var ret = oldset.apply(this, arguments);
  this.fire('set', ret);
  return ret;
};
```
然后，在组件的初始化代码中，我可以订阅set事件：
```
this._parent.on('set', function (ret){
    ret.then(update);
});
```
这不适用于Ractive.push()和其他方法。此外，这将通知我的组件有关set所做的所有更改，而不仅仅是那些影响组件DOM的更改。最后，我必须使用this._parent明确引用组件的父级，这意味着我的组件不能嵌套。

那么，在Ractive中有更好的方法来实现这一目标吗？

Answer 1

初始化选项允许oncomplete（或ractive.on（＆＃39;完成＆＃39; ...如果您愿意）进行初始渲染。请参阅http://docs.ractivejs.org/latest/lifecycle-events

所有数据修改方法set，animate，push，slice等都会返回一个在DOM更新和转换之前不会被调用的承诺已经完成了。

这是一个简单的例子（http://jsfiddle.net/ctfyes7t/）：

{{#if show}}
    <li intro='fade:{ duration: 2000 }'>ta da!</li>
{{/if}}

r.set('show', true).then(function(){
    // called when fade intro complete
});

Answer 2

可以从另一个方向解决问题：使用MutationObserver可以观察到对DOM特定部分的更改。

因此，我最终采用以下方法来包装外部小部件：基本上，我们使用intro转换得到组件的顶级节点（并初始化第三方代码），然后在oncomplete回调寄存器观察器中使用类似的东西：

this.observer = new MutationObserver(update);
this.observer.observe(this.node, {
    childList: true,
    subtree: true,
    characterData: true,
    attributes: true, // transitions may change attributes
});

其中，函数update更新了第三方小部件。

Here是组件的源代码。

我怎么知道组件的DOM何时更新并在Ractive中完成转换？

2 个答案: