在Ractive.js中的onrender vs init

Question

我最近开始尝试Ractive.js.我对它的组件特别感兴趣.我立即注意到的一件事是许多例子都在使用该init选项.但是,当我尝试init在我的代码中使用时,我会收到弃用通知,然后建议使用onrender.onrender然而init,其中的例子少得多,而且一些功能this.find在内部没有onrender.我查看了Github问题,但是没有找到任何有关此更改背后的推理或者选择特定于组件的元素的建议路径是什么.

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

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

Answer 1

你可以this.find()在里面使用onrender(如果由于某种原因,你发现了一个错误!).

我们拆分init成oninit和onrender,而回了一些原因.你提到的那些例子已经过时了 - 它们是在ractivejs.org上的某个地方吗？如果是这样我们应该修复它们.您可以在文档中找到有关生命周期事件的更多信息,但基本区别在于:

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

我做了一个你的codepen的分支,用更惯用的Ractive代码替换jQuery的东西,以显示你如何做而不存储DOM引用.