Tracker 方法并不完全属于 Meteor 功能的核心,很少在教程和初学者书籍中使用(如果是的话,也没有很好地解释),因此被认为更“可怕” “比框架的其余大部分部分都要多。
就我而言,我从未成功地将 Tracker.autorun
纳入我的项目中,因为它似乎从未达到预期的效果。这就是文档所说的:
Run a function now and rerun it later whenever its dependencies change.
对我来说,这听起来像是一种使非反动来源变得反动的方式,但接下来你看一下例子,第一个看起来像这样:
Tracker.autorun(function () {
var oldest = _.max(Monkeys.find().fetch(), function (monkey) {
return monkey.age;
});
if (oldest)
Session.set("oldest", oldest.name);
});
这与不使用 Tracker.autorun
到底有什么不同?游标已经是一个反动源,并且让事情变得更加困惑下一个示例涉及另一个反动源: session 。
Tracker.autorun
是否仅适用于反动源,如果是这样,在 Tracker
中使用它们有什么好处?让他们变得双重反动?
最佳答案
为了实现响应式编程(事件驱动编程的一种变体),Meteor 使用了 2 个不同的概念:
- 响应式(Reactive)计算:每次修改底层依赖项时都会重新运行的代码片段。
- 响应式(Reactive)数据源:在响应式(Reactive)计算中使用时能够注册依赖关系的对象,使其无效并使用新的数据值再次运行。
这两个概念是由两个很少使用的底层实现的Tracker
对象,即Tracker.Computation和辅助对象 Tracker.Dependency这是一个用于存储一组计算的容器。
一个Tracker.Computation
是一个具有 2 个重要方法的对象:
-
invalidate()
,这导致计算重新运行。 -
onInvalidate(callback)
用于实际运行计算任意代码。
当您调用Tracker.autorun
时,您基本上是在创建一个新的计算并注册一个 onInvalidate
使用您作为参数传递的函数进行回调。
一个Tracker.Dependency
是使用 2 种方法进行计算的集合。
-
depend()
:将当前计算添加到集合中。 -
changed()
:调用时,使每个注册的计算无效。
当响应式(Reactive)数据源在计算中注册依赖项时,它会调用 Dependency.depend()
,它只是将当前计算(如果有)添加到跟踪计算集中。
响应式(Reactive)数据源修改时,调用Dependency.changed()
这将使集合中每个已注册的计算无效。
来源:The Meteor Tracker manual .
在 Meteor 框架中,您通常只处理几个实现响应式编程概念的更高级别的对象。
- 响应式(Reactive)计算是使用
Tracker.autorun
生成的,默认情况下,模板助手始终在响应式(Reactive)计算中运行。 - 响应式(Reactive)数据源正在使用
Tracker.Dependency
为了使计算无效,它们包括 MiniMongo 游标,Session
变量,Meteor.user()
等等...
使用Tracker.autorun
当您需要在模板助手之外以 react 方式重新运行任意代码时,例如在模板 onRendered
内生命周期事件,使用快捷键this.autorun
(生成响应式(Reactive)计算,当模板被销毁时自动停止)以对任何反应式数据源修改使用react。
这是一个模板的小示例,该模板计算您单击按钮的次数,并在单击 10 次时将计数器重置为 0。
HTML
<template name="counter">
<div class="counter>
<button type="button">Click me !</button>
<p>You clicked the button {{count}} times.</p>
</div>
</template>
JS
Template.counter.onCreated(function(){
this.count = new ReactiveVar(0);
});
Template.counter.onRendered(function(){
this.autorun(function(){
var count = this.count.get();
if(count == 10){
this.count.set(0);
}
}.bind(this));
});
Template.counter.helpers({
count: function(){
return Template.instance().count.get();
}
});
Template.counter.events({
"click button": function(event, template){
var count = template.count.get();
template.count.set(count + 1);
}
});
关于javascript - 简单来说,Tracker.autorun 是做什么的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30546486/