在 Ractive.js 中取消渲染与初始化
onrender vs init in Ractive.js
我最近开始尝试 Ractive.js。我对其 组件 特别感兴趣。我立即注意到的一件事是许多示例都使用了 init
选项。但是,当我尝试在我的代码中使用 init
时,我收到弃用通知,然后建议改用 onrender
。然而,onrender
的示例比 init
少得多,并且 onrender
中的某些功能(例如 this.find
不可用)。我查看了 Github 问题,但找不到此更改背后的任何原因,也找不到针对组件特定的 selecting 元素的建议路径。
我创建了一个 test pen 来尝试用新的 API 创建一个递归组件,但我不得不求助于使用 jQuery 和一个未记录的 fragment
api 到 select 个我需要操作的特定 DOM 个节点。我觉得这与 Ractive 期望您做事的方式背道而驰,但我无法弄清楚现有文档对我的期望。
init
和 onrender
选项之间的主要区别是什么?onrender
希望您如何处理组件内的特定元素及其事件?
您可以在 onrender
中使用 this.find()
(如果由于某种原因不能使用,则说明您发现了错误!)。
我们不久前将 init
拆分为 oninit
和 onrender
,原因有很多。你提到的那些例子已经过时了——它们是在 ractivejs.org 上的某个地方吗?如果是这样,我们应该修复它们。您可以找到有关生命周期事件的更多信息 here on the docs,但基本区别在于:
init
在初始渲染时被调用(假设组件 被 渲染,即如果您正在进行服务器端渲染,则从不在 node.js 中)
oninit
在创建时调用,紧接在渲染之前。对于任何 Ractive 实例,无论它是否被渲染,它都会被调用一次,而且只调用一次。因此,它是设置事件处理程序等的好地方。oninit
的对立面是 onteardown
,因此您可以在必要时使用该处理程序进行任何清理(或在 [= 中使用 this.on('teardown'...)
13=]).
onrender
在渲染组件时调用。这可能会发生不止一次(如果您取消渲染,然后重新渲染等)或根本不会发生。如果你需要存储 DOM 引用等,这是地方。 onrender
的反义词是 onunrender
.
我做了一个 fork of your codepen,用更惯用的 Ractive 代码替换了 jQuery 的东西,以展示你如何在不存储 DOM 引用的情况下做到这一点。
我最近开始尝试 Ractive.js。我对其 组件 特别感兴趣。我立即注意到的一件事是许多示例都使用了 init
选项。但是,当我尝试在我的代码中使用 init
时,我收到弃用通知,然后建议改用 onrender
。然而,onrender
的示例比 init
少得多,并且 onrender
中的某些功能(例如 this.find
不可用)。我查看了 Github 问题,但找不到此更改背后的任何原因,也找不到针对组件特定的 selecting 元素的建议路径。
我创建了一个 test pen 来尝试用新的 API 创建一个递归组件,但我不得不求助于使用 jQuery 和一个未记录的 fragment
api 到 select 个我需要操作的特定 DOM 个节点。我觉得这与 Ractive 期望您做事的方式背道而驰,但我无法弄清楚现有文档对我的期望。
init
和 onrender
选项之间的主要区别是什么?onrender
希望您如何处理组件内的特定元素及其事件?
您可以在 onrender
中使用 this.find()
(如果由于某种原因不能使用,则说明您发现了错误!)。
我们不久前将 init
拆分为 oninit
和 onrender
,原因有很多。你提到的那些例子已经过时了——它们是在 ractivejs.org 上的某个地方吗?如果是这样,我们应该修复它们。您可以找到有关生命周期事件的更多信息 here on the docs,但基本区别在于:
init
在初始渲染时被调用(假设组件 被 渲染,即如果您正在进行服务器端渲染,则从不在 node.js 中)oninit
在创建时调用,紧接在渲染之前。对于任何 Ractive 实例,无论它是否被渲染,它都会被调用一次,而且只调用一次。因此,它是设置事件处理程序等的好地方。oninit
的对立面是onteardown
,因此您可以在必要时使用该处理程序进行任何清理(或在 [= 中使用this.on('teardown'...)
13=]).onrender
在渲染组件时调用。这可能会发生不止一次(如果您取消渲染,然后重新渲染等)或根本不会发生。如果你需要存储 DOM 引用等,这是地方。onrender
的反义词是onunrender
.
我做了一个 fork of your codepen,用更惯用的 Ractive 代码替换了 jQuery 的东西,以展示你如何在不存储 DOM 引用的情况下做到这一点。