- 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:
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 matchselectorString
and returns a jQuery object from those elements.this.findAll(selectorString)
: This method finds all elements that matchselectorString
, but returns the plain DOM elements.this.find(selectorString)
: This method finds the first element that matchesselectorString
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 contextthis.autorun(runFunc)
: A reactiveTracker.autorun()
function that is stopped when the template instance is destroyed.this.view
: This object contains theBlaze.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 calledexamples.js
in ourtemplates
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 ourcontextExample
template helpers. To make this helper run, we also need to add this helper to ourcontextExample
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.
Now let's use make our template interactive using events.
- SQL Server 從入門(mén)到項(xiàng)目實(shí)踐(超值版)
- PyTorch自動(dòng)駕駛視覺(jué)感知算法實(shí)戰(zhàn)
- Python Deep Learning
- Python Tools for Visual Studio
- Mastering Linux Security and Hardening
- Python機(jī)器學(xué)習(xí)之金融風(fēng)險(xiǎn)管理
- Hadoop大數(shù)據(jù)分析技術(shù)
- 分布式數(shù)據(jù)庫(kù)原理、架構(gòu)與實(shí)踐
- Delphi開(kāi)發(fā)典型模塊大全(修訂版)
- 官方 Scratch 3.0 編程趣味卡:讓孩子們愛(ài)上編程(全彩)
- Java程序設(shè)計(jì)教程
- Node.js應(yīng)用開(kāi)發(fā)
- 一覽眾山小:ASP.NET Web開(kāi)發(fā)修行實(shí)錄
- Visual FoxPro數(shù)據(jù)庫(kù)程序設(shè)計(jì)
- JavaScript程序設(shè)計(jì)基礎(chǔ)教程(慕課版)