Ractive.js中的onrender

Question

我最近开始尝试Ractive.js。我对它的组件特别感兴趣。我立即注意到的一件事是，许多示例都使用了init选项。但是，当我试图在代码中使用init时，我会收到一个不推荐的通知，然后它建议使用onrender。然而，onrender的例子比init少得多，一些函数(如this.find )在onrender中不可用。我研究了Github问题，但找不到这种更改背后的任何理由，也找不到选择特定于组件的元素的建议路径。

我创建了一个测试笔来尝试使用新的API创建递归组件，但是我不得不使用jQuery和一个无文档的fragment api来选择我需要操作的特定DOM节点。我觉得这违背了RActive期望您做事情的方式，但我不知道现有文档对我的期望是什么。

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

Answer 1

您可以在onrender中使用onrender(如果由于某些原因不能使用，您已经发现了一个bug!)

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

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

我做了一个你的分叉，用更多惯用的Ractive代码替换了jQuery，以展示如何在不存储DOM引用的情况下做到这一点。