meteor实例—4—（helper等）

标签：com   之间   虚拟   测试   document   element   ide   post   pos   

上面的一些{{}}标记，其中的数据来龙去脉基本已经清楚了，但是还有一个{{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;
}
});

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等）

标签：com   之间   虚拟   测试   document   element   ide   post   pos   

原文地址：http://www.cnblogs.com/wonderhow2/p/6344992.html