火炎焱燚又双叒叕

書名： Building Single：page Web Apps with Meteor
作者名： Fabian Vogelsteller
本章字數： 523字
更新時間： 2021-08-06 19:29:38

"this" in template helpers and template callbacks

In Meteor, this in template helpers is used differently in template callbacks such as created(), rendered(), and destroyed().

As already mentioned, templates have three callback functions that are fired in different states of the template:

created: This fires when the template gets initiated but is not yet in the DOM
rendered: This fires when the template and all its sub templates are attached to the DOM
destroyed: This fires when the template is removed from the DOM and before the instance of the template gets destroyed

In these callback functions, this refers to the current template instance. The instance object can access the templates DOM and comes with the following methods:

this.$(selectorString): This method finds all elements that match selectorString and returns a jQuery object from those elements.
this.findAll(selectorString): This method finds all elements that match selectorString, but returns the plain DOM elements.
this.find(selectorString): This method finds the first element that matches selectorString and returns a plain DOM element.
this.firstNode: This object contains the first element in the template.
this.lastNode: This object contains the last element in the template.
this.data: This object contains the templates data context
this.autorun(runFunc): A reactive Tracker.autorun() function that is stopped when the template instance is destroyed.
this.view: This object contains the Blaze.View instance for this template. Blaze.View are the building blocks of reactive templates.

Inside helper functions, this refers only to the current data context.

To make these different behaviors visible, we will take a look at some examples:

When we want to access the DOM of a template, we must do it in the rendered callback because only at this point, the template elements will be in the DOM. To see it in action, we edit our home.js file as follows:
```
Template.home.rendered = function(){
  console.log('Rendered the home template');

 this.$('p').html('We just replaced that text!');
};
```
This will replace the first p tag that is created by the {{#markdown}} block helper, which we put there before, with the string we set. Now when we check the browser, we will see that the first <p> tag that contained our blog's introduction text has been replaced.
For the next example, we need to create an additional template JavaScript file for our contextExample template. To do this, we create a new file called examples.js in our templates folder and save it using the following code snippet:
```
Template.contextExample.rendered = function(){
  console.log('Rendered Context Example', this.data);
};

Template.contextExample.helpers({
  logContext: function(){
    console.log('Context Log Helper', this);
  }
});
```
This will add the rendered callback as well as a helper called logContext to our contextExample template helpers. To make this helper run, we also need to add this helper to our contextExample template as follows:
```
<p>{{logContext}}</p>
```

When we now go back to the console of our browser, we see that the data context object has been returned for all the rendered callbacks and helpers from our rendered contextTemplates template. We can also see that helpers will run before the rendered callback.

Note

In case you need access to the templates instance from inside a template helper, you can use Template.instance() to get it.

Now let's use make our template interactive using events.

官术网_书友最值得收藏!

Building Single：page Web Apps with Meteor

"this" in template helpers and template callbacks

Note