在Ractive.js中的onrender vs init

Question

我最近开始尝试Ractive.js 。 我对它的组件特别感兴趣。 我立即注意到的一件事是很多例子都使用了init选项。 但是当我尝试在我的代码中使用init ，我得到了一个弃用通知，然后建议使用onrender 。 onrender但是有比要少得多实例init和一些诸如功能this.find无法获得里面onrender 。 我查看了Github问题，但是没有找到任何有关此更改背后的推理或者选择特定于组件的元素的建议路径是什么。

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

什么是之间的主要区别init和onrender选项以及如何onrender希望你处理组件中操作的具体内容和他们的活动？

Answer 1

你可以在onrender使用this.find() （如果由于某些原因你不能找到错误！）。

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

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

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