用简单的英语,Tracker.autorun做什么? [英] In plain English, what does Tracker.autorun do?

查看:139
本文介绍了用简单的英语,Tracker.autorun做什么?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

Tracker方法并不完全属于Meteor功能的核心,很少用于教程和初学者书籍(如果他们没有得到很好的解释),结果被认为更加可怕 比其余的大部分框架都要好。



我,从来没有设法纠缠 Tracker.autorun 进入我的一个项目,因为它似乎从来没有做过预期的事情。这就是文档所说的:


现在运行一个函数,并在其依赖项
发生变化时重新运行。


对我而言,这听起来像是让非反动源反动的一种方式,但接下来你会看到一些例子,第一个看起来像这个:

  Tracker.autorun(function(){
var oldest = _.max(Monkeys.find() .fetch(),function(monkey){
return monkey.age;
});
if(最旧)
Session.set(最旧的,最旧的.name) ;
});

与使用 Tracker.autorun ?游标已经是一个反动的来源,让事情变得更加混乱下一个例子涉及另一个反动的来源:Sessions。



是否 Tracker.autorun 仅适用于反动源,如果是这样,在追踪器中使用它们有什么好处?让他们倍加反动?

解决方案

为了实现反应式编程(事件驱动编程的一种变体),Meteor使用了两个不同的概念: / p>


  • 反应计算:每次修改其基础依赖关系时将被反应重新运行的代码片段。

  • 反应数据源:在反应计算中使用时能够注册依赖关系的对象,使其无效并使其与新数据值一起运行。



这两个概念是由两个很少使用的基础 Tracker 对象实现的,即 Tracker.Computation 和辅助对象 Tracker.Dependency ,它是一个用于存储一组计算的容器。



A Tracker.Com putation 是一个有两个重要方法的对象:




  • invalidate(),这导致计算重新运行。

  • onInvalidate(callback)实际运行计算任意代码。



当你拨打 Tracker.autorun 时,你基本上是在创建一个新的计算并使用您作为参数传递的函数注册 onInvalidate 回调。



A 跟踪器。依赖是具有2种方法的计算集合。




  • depend():将当前计算添加到集合中。

  • changed():调用时,使每个已注册的计算无效。



当一个被动数据源在计算中注册一个依赖项时,它正在调用 Dependency.depend(),它只是将当前计算(如果有的话)添加到跟踪计算集中。



当修改了被动数据源时,它正在调用 Dependency.changed()这将使每个已注册的计算无效在集合中。



来源: Meteor Tracker手册



在Meteor框架中,您通常只处理实现反应式编程概念的几个更高级别的对象。




  • 使用 Tracker.autorun 生成反应计算,默认模板助手总是在反应计算中运行。

  • 被动数据源使用 Tracker.Dependency 来使计算无效,它们包括MiniMongo游标, Session 变量, Meteor.user()等......



当您需要在模板助手之外反应性地重新运行任意代码时,请使用 Tracker.autorun ,例如一边模板 onRendered 生命周期事件,使用快捷方式 this.autorun (产生一个反应计算,当你自动停止时模板被破坏)对任何被动数据源修改做出反应。



这是一个模板的小例子,它计算你点击一个按钮并将计数器重置为多少次单击10次时为0。



HTML

 <模板名称= 计数器 > 
< div class =counter>
< button type =button>点击我!< / button>
< p>您点击按钮{{count} }次。< / 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);
}
});


The Tracker methods don't exactly belong to the core of Meteor's functionality, are seldomly used in tutorials and beginner books (and if they are they are not explained very well), and as a consequence are considered a lot more "scary" than most of the rest of the framework.

I, for one, have never managed to wrangle Tracker.autorun into a project of mine as it never seems to do what is expected of it. This is what the docs say it does:

Run a function now and rerun it later whenever its dependencies change.

To me this sounds like a way of making non-reactionary sources reactionary, but then you come to the examples, the first of which looks like this:

Tracker.autorun(function () {
  var oldest = _.max(Monkeys.find().fetch(), function (monkey) {
    return monkey.age;
  });
  if (oldest)
    Session.set("oldest", oldest.name);
});

How exactly is this different from not using Tracker.autorun? Cursors are already a reactionary source, and to make matters more confusing the next example deals with another reactionary source: Sessions.

Does Tracker.autorun only work with reactionary sources, and if so what is the benefit of using them inside a Tracker? Making them doubly reactionary?

解决方案

To implement reactive programming (a variant of event driven programming), Meteor uses 2 different concepts :

  • reactive computations : pieces of code that will reactively re-run each time their underlying dependencies are modified.
  • reactive data sources : objects capable of registering dependencies when used inside a reactive computation, to invalidate it and make it run again with the new data value.

These two concepts are implemented by two rarely used underlying Tracker objects, namely Tracker.Computation and the helper object Tracker.Dependency which is a container for storing a set of computations.

A Tracker.Computation is an object with 2 important methods :

  • invalidate(), which is causing the computation to rerun.
  • onInvalidate(callback) for actually running the computation arbitrary code.

When you call Tracker.autorun, you're basically creating a new computation and registering an onInvalidate callback with the function you pass as argument.

A Tracker.Dependency is a collection of computations with 2 methods.

  • depend() : adds the current computation to the set.
  • changed() : when called, invalidates every registered computations.

When a reactive data source registers a dependency inside a computation, it is calling Dependency.depend(), which simply adds the current computation (if any) to the set of tracked computations.

When the reactive data source is modified, it is calling Dependency.changed() which is going to invalidate every registered computations in the set.

Source : The Meteor Tracker manual.

In the Meteor framework, you usually only deal with several higher level objects implementing the concepts of reactive programming.

  • reactive computations are spawned using Tracker.autorun, by default template helpers are always run inside a reactive computation.
  • reactive data sources are using Tracker.Dependency to invalidate computations, they include MiniMongo cursors, Session variables, Meteor.user(), etc...

Use Tracker.autorun when you need to reactively rerun arbitrary code outside of template helpers, for example inside a template onRendered lifecycle event, use the shortcut this.autorun (spawning a reactive computation that is automatically stopped when the template is destroyed) to react to any reactive data sources modifications.

Here is a small example of a template that counts how many times you clicked a button and reset the counter to 0 when clicked 10 times.

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);
  }
});

这篇关于用简单的英语,Tracker.autorun做什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆