Meteor使用的模板系统与Mustache很相似.大括号{% raw %}{{}}{% endraw %}表示要呈现的内容. 通过简单地在两对大括号里添加内容如{% raw %}{{hello}}{% endraw %}, 模板系统会用hello这个变量的值来替换它. 后面会更详细的介绍.
注意到了在entryfield这个词前面有个大于号>了吗? 使用该符号来指定渲染哪一个模板.
<template> <input type="text" placeholder="Name" /> <input type="text" placeholder="Your Message" /> </template>
在这个例子中,template标签有单个属性, 即模板的名字, 这就是我们要渲染的模板, 注意, 模板的名字要和body里的代码指定的模板名字一样 ({{> entryfield}})
查看浏览器, 你会发现页面已经刷新了, 输入框已经呈现出来了.
接下来, 在body里边添加另外的一个mutache标签用以渲染讯息列表
{{> messages}}
最后, 我们还需要新建一个名叫messages的模板. 在entryfield模板下面添加下面这段代码
<template> <p> {{#each messages}} <strong>{{name}}</strong>- {{message}} {{/each}} </p> </template>
注意到each子句. 在Meteor中你可以使用如下的语法来遍历一个数组模板
{{#each [name of array]}} {{/each}}
使用each循环时,上下文会有所改变. 当引用变量的时候, 实际上你引用的是每一个数组元素的值.
例如,在我们的chat应用中, 我们遍历了数组模板"messages"里边的每个元素, 该数组可以像下面这样,
[ { "name": "Andrew", "message": "Hello world!" }, { "name": "Bob", "message": "Hey, Andrew!"" } ]
然后, 在each循环中, 你可以看到{% raw %}{{message}}{% endraw %}{% raw %}{{name}}{% endraw %}, 这会引用 每一个数组元素的值来替代(Andrew 和 Bob 替换 name, 以及各自的问候信息.)
当返回到你的浏览器, 你还看不到任何的改变. 因为讯息数组还没被传送到模板, 所以Meteor遍历不到任何东西来呈现.
你的chat.html最后应该是这样的
<head> <title>chat</title> </head> <body> {{> entryfield}} {{> messages}} </body> <template> <input type="text" placeholder="Name" /> <input type="text" placeholder="Your Message" /> </template> <template> <p> {{#each messages}} <strong>{{name}}</strong>- {{message}}<br/> {{/each}} </p> </template>
Javascript
从现在开始, 我们处理的大部分代码都是客户端代码, 所以, 除非特别说明, 以下的代码都是在if (Meteor.is_client)代码块中.
在我们编写展示讯息的代码之前,让我们先新建一个Collection. 从本质上讲, 这是一组Models. 换句话说, 在这个chat应用的环境下, Messages collection保存着整个聊天记录, 而每条讯息记录是一个Model.
在if语句前, 添加如下代码来初始化Collection:
Messages = new Meteor.Collection('messages');
因为我们希望这个Collection可以在客户端和服务端被创建, 所以我们把它写在了客户端代码块之外.
由于Meteor为我们做了大部分的工作, 要展示聊天记录是非常容易的. 只需要把下面的代码添加进if语句里边.
Template.messages.messages = function(){ return Messages.find({}, { sort: { time: -1 }}); }
让我们拆开来分析这段代码:
Template.messages.messages = function(){ … }
第一部分Template表示我们正在修改一个模板的行为.
Template.messages.messages = function(){ … }
第二部分messages是模板的名字, 表示是在修改哪一个模板. 例如,如果我们想要对"entryfield"模板做些什么, 只需把代码改成
Template.entryfields.variable = function(){ … }
(在这里, 请别这么做)
Template.messages.messages = function(){ … }
第三部分的这个messages代表的是一个这个模板里的一个变量. 还记得我们的each循环遍历messages吗? 这就是那个mesaages.
当你打开浏览器时, 页面还是没有什么改变. 这是意料之中的事, 因为我们只抓取的讯息, 而没有展示出来.
此时,你的chat.js应该是这样的. 是否很惊讶就只需在服务器写这么些代码我们就能展示一个实时的聊天记录应用.
Messages = new Meteor.Collection('messages'); if (Meteor.is_client) { Template.messages.messages = function(){ return Messages.find({}, { sort: { time: -1 }}); } }
在console里添加Message
这部分的内容是可选的, 当然它有助于你调试程序. 你可以直接跳过往下学习建立form来响应键盘事件(key press).
如果你想要测试你的讯息显示代码, 你可以手动插入一条记录到数据库. 打开你的浏览器控制台, 并输入如下:
Messages.insert({ name: 'Andrew', message: 'Hello world!', time: 0 })
这将会在数据库中新建一条记录, 如果正确的操作了的话,那浏览器就会即刻更新这条讯息在页面上.
消息表单
回到chat.js文件当中，我们会将供输入的form和数据库链接起来以接收用户聊天数据的提交。在底部添加下面的代码，不过注意要在if语句块中。