在Ractive.js中的onrender vs init

时间:2015-04-13 02:21:09

标签: javascript ractivejs

我最近开始尝试Ractive.js。我对它的组件特别感兴趣。我立即注意到的一件事是,许多示例都使用init选项。但是,当我尝试在代码中使用init时,我会收到弃用通知,然后建议使用onrender。然而,onrender的示例远少于init,而this.find中的某些功能在onrender内无法使用。我查看了Github问题,但找不到任何改变背后的原因或者选择特定于组件的元素的建议路径是什么。

我创建了一个test pen来尝试使用新API创建一个递归组件,但我不得不求助于使用jQuery和一个未记录的fragment api来选择我需要操作的特定DOM节点。我觉得这反对Ractive希望你做的事情,但我无法弄清楚现有文档对我的期望。

initonrender选项之间的主要区别是什么?onrender期望您如何处理组件中特定元素及其事件的操作?

1 个答案:

答案 0 :(得分:5)

您可以在this.find()内使用onrender(如果由于某种原因,您已经发现了错误!)。

由于多种原因,我们暂时将init分为oninitonrender。你提到的那些例子已经过时了 - 它们是在ractivejs.org上的某个地方吗?如果是这样我们应该修复它们。您可以找到有关生命周期事件here on the docs的更多信息,但基本区别在于:

  • init在初始渲染时调用(假设组件 呈现,即从未在node.js中,如果您正在进行服务器端渲染)
  • 在渲染之前立即调用
  • oninit。对于任何Ractive实例,它都会被调用一次,无论它是否被渲染。因此,它是设置事件处理程序等的好地方。oninit的反面是onteardown,因此您可以使用该处理程序在必要时进行任何清理(或使用{{1} } this.on('teardown'...))。
  • 只要呈现组件,就会调用
  • oninit。这可能不止一次发生(如果你没有渲染,然后重新渲染等)或根本不发生。如果你需要存储DOM引用等,那就是这个地方。与onrender相反的是onrender

我做了一个fork of your codepen,用更惯用的Ractive代码替换了jQuery的东西,以显示你如何在不存储DOM引用的情况下完成它。