上面的一些{{}}标记,其中的数据来龙去脉基本已经清楚了,但是还有一个{{domain}}没有提到,就是post_item.html中的<h3><a href="{{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; } });
其实我在测试的时候没有用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 )中。