jquery - Ractive 组件的生命周期

Question

除了调用 init 之外，我不确定 Ractive 组件的生命周期是什么。例如，什么时候直接访问 DOM 是安全的？我尝试使用流行的 sparklines jQuery 插件，但我从未成功过。我使用了一个指令，并且 - 瞧 - 可爱的迷你图。

关于组件在 Ractive 中接收什么样的事件和回调的任何文档？

Answer 1

简短的回答是，在最近的稳定版本中，它是未定义的——在某些情况下，组件的init方法在组件被附加到 DOM 之前被调用。那是一个错误。

在下一个版本 0.4.0 中不再是这种情况：http: //cdn.ractivejs.org/edge/Ractive.min.js

从 0.4.0 开始，它看起来像这样：

Ractive.components.sparkline = Ractive.extend({
  beforeInit: function (options) {
    // called before any setup happens, in case you
    // need to transform `options` in any way
  },
  init: function (options) {
    // called immediately after the initial render,
    // when the component is in the DOM
  },
  complete: function () {
    // called when any initial transitions have
    // completed
  }
});

teardown在从 DOM 中删除组件之前将触发一个事件 - 例如，在您的init方法中，您可以添加一些代码来执行任何必要的清理（如果有）：

init: function () {
  this.on('teardown', function () {
    // cleanup
  }
},
...

我欢迎您对您认为缺少的其他事件/钩子提供任何反馈（如果有的话）。

Answer 2

图书馆现在已经相当成熟了。在模板/组件中使用Ractive.on('render', ...);oronrender来访问 DOM。请参阅：http ://docs.ractivejs.org/latest/lifecycle-events 。

从版本0.6开始就是这样。