meteor实例—4—(helper等)

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

时间: 2024-10-17 22:53:14

meteor实例—4—(helper等)的相关文章

meteor实例—7—发布(Publication)和订阅(Subscription)

发布(Publication)和订阅(Subscription)是 Meteor 的最基本最重要的概念之一,但是如果你是刚刚开始接触 Meteor 的话,也是有些难度的.这已经导致不少误解,比如认为 Meteor 是不安全的,或者说 Meteor 应用无法处理大量数据等等.人们起初会感觉这些概念很迷惑很大程度上是因为 Meteor 像变魔法一样替你做了很多事儿.尽管这些魔法最终看起来很有效,但是它们掩盖了后台真正做的工作(好像魔术一样).所以让我们剥去魔法的外衣来看看究竟发生了什么.过去的日子首

Xposed模块开发教程

转:http://vbill.github.io/2015/02/10/xposed-1/ http://blog.csdn.net/zhangmiaoping23/article/details/54891387 原文地址.这是开发者所写的,可以说是官方开发指南.文章讲述了Xposed的原理,以及怎么开发Xposed框架的模块.头一次翻译技术文档,有错误的话请多包涵. 好了,你想学习怎么为Xposed开发新的模块么?那么读读这篇教程(或者我们可以称他为"泛读短文")学着怎么去做.这不

ElaineMOMO项目总结

ElaineMOMO--智能短信 相关技术总结 1.src中的目录结构 activity.base ----–存放基本activity,方便activity.ui中的activity继承 activty.ui -----–存放activity adapter ------–存放adapter bean --------存放实体bean的创建 dao --------进行数据库相关的操作包 dialog--------对话框 fragment------–存放fragment globle----

YiluPHP是如何做到不用配置、不用注入就能直接使用所有的类?

使用过YiluPHP的人都会发现,不管是模型类还是逻辑类.辅助类还是工具类,使用所有类都不需要在配置文件中设置加载或注入,也不需要在页面中使用 include 或 require 或 use ,直接使用   $app->类名->方法名()   就可以了,这个机制如此方便,刚开始使用的人都会有点不知得措,担心自己是不是做错了什么?我现在告诉你,你没有少做啥,也没有做错啥,YiluPHP就是这样设计的,下面我来告诉你YiluPHP是如何做到的. 有人可能会想使用 spl_autoload_regi

阿里程序员的2019Android年终盘点,必备技能知识点,程序员必须收藏

临近年末,回顾总结2019,很多从事Android开发的朋友仍然遇到了很多困难,无法实现突破. 本文旨在通过以下知识点总结 希望能帮助上述陷入移动开发困境的朋友.所以接下来本篇文章主要介绍 Android 开发中的部分知识点,本文节选自阿里巴巴开发手册,下载地址.文末还有 高级架构技术进阶脑图.Android开发面试专题资料,高级进阶架构资源 帮助大家学习提升进阶,也节省大家在网上搜索资料的时间来学习,也可以分享给身边好友一起学习,通过阅读本篇文章,您将收获以下内容: 一.Java 语言规范二.

Meteor——不一般的全栈开发平台!

一.全栈开发平台 - 不仅仅是前端 Meteor和那些名声如雷贯耳的前端框架,比如Angular, React等都不一样,它是一个 采用单一开发语言的全栈开发的平台:开发者可以使用JavaScript同时 进行前端和后端的开发,然后交给Meteor运行这个包含了前后端的完整应用: 从图中你可以看到,Meteor在前端使用浏览器作为基础运行环境,在后端则是以NodeJS作为 基础运行环境,以MongoDB作为数据持久化系统. Meteor提供了一个横跨前端和后端的中间层平台,预置封装了很多功能库,

Meteor:组件思想

受React组件思想启发,本文讨论在Meteor客户端应用组件化思想,以Spacebar模板语言为例. 所谓前端组件(我的定义),是一组html代码以及相关样式.行为的封装.它可被复用,通过传递参数进行初始化,并可以调用其定义的方法对其进行控制.并且,其状态,样式都是局部封装的,不会扩散并影响全局. 典型地,一个组件具有data和states(React中叫做props和statues).data是外部传入,用于构建.渲染组件的数据,在组件实例的整个生命周期中是不变的.states是组件内部封装

用最基本的EF+MVC+JQ+AJAX+bootstrap实现权限管理的简单实例 之登陆和操作权限

先来一堆关于上篇文章的废话(不喜者点此隐藏) 今天把博客加了个小功能,就是点标题可以隐藏或展示相关内容,做法很傻,就是引用了bootstrap的两个css类和全部的js文件,其实这样的小功能完全应该自己做的,主要还是因为前端差,还有就是懒.请大家不要太过在意命名和前端样式,我并没有进入公司工作,命名没有具体规范,都是随心所欲.前端实在太差,如果你觉得颜色样式太差,只能说明我的审美有问题,咱们主要看功能实现. 上篇文章发布后有一定的推荐量和浏量,对一个初学者来说,自认为还是挺不错的.最主要的是收到

Meteor:应用UI状态

Meteor应用的UI状态该如何存放?这里介绍几种方法. Session Session是meteor提供的一个前端全局reactive数据源.使用方法简单,功能也相对简陋,适用于页面结构简单的单页应用. Local Collection 前端通过new Mongo.Collection(null)创建一个local collection,相对于session,可以提供功能更强大的reactive数据源.适用于页面结构相对复杂的多页应用. Template Instance Reactive V