首页 > 代码库 > meteor实例—4—(helper等)

meteor实例—4—(helper等)

上面的一些{{}}标记,其中的数据来龙去脉基本已经清楚了,但是还有一个{{domain}}没有提到,就是post_item.html中的<h3><a href="http://www.mamicode.com/{{url}}">{{title}}</a><span>{{domain}}</span></h3>这一句,这个东西是干什么用的呢,查看一下客户端源代码,会发现<span>和</span>中间是空的,就算删除了{{domain}}也对展示毫无影响,那么{{domain}}是干什么的,其实domain应该是post_item helper的一个属性或者方法,官方给出的例子是这样的:

我们现在在client\template\posts下创建一个post_item.js 文件来包含postItem 模板的逻辑:

技术分享
Template.postItem.helpers({
domain: function() {
var a = document.createElement(‘a‘);
a.href = this.url;
return a.hostname;
}
});
View Code

其实我在测试的时候没有用var,用的typescript的let,即 let a = document.createElement(‘a‘); typescript是微软推出的一个高阶javascript,对于习惯于面向对象编程的人来说,typescript绝对是个好的选择,特别是对于类的处理,使用起来会非常顺手。

这一次我们domain helper 的值不再是一个数组,而是一个匿名函数。相比起我们之前简化的虚拟数据的例子,这种模式更为常见(而且更有用)。

该部分代码的功能是根据当前列表项的url生成一个变量a,并返回其域名。

但是它一开始是从哪里获得 URL 地址呢?
为了回答这个问题,我们需要回到我们的posts_list.html 模板。{{#each}} 代码块不仅遍历我们数组,它还在代码块范围内将 this 的值赋予被遍历的对象。
这意味着在{{#each}} 标记之间,每个 post 都可以通过this 依次访问,并且一直延伸到模板 helper( post_item.js )中。

 

meteor实例—4—(helper等)