在你App的根目录文件夹下,你应该可以看到这三个文件:chat.html, chat.css和chat.js。这三个文件都是自带说明部分的。HTML文件包含了App的模型以及外观,他们都是被chat.css定义的。Javascript文件包含了在client和server端要执行的脚本。有一点很重要,不要把任何东西放进这个脚本文件,比如说配置参数和密码,因为任何人都可以通过查看你应用程序的代码看到这些。
用你喜欢的文本编辑软件打开chat.js这个文件。就个人而言,我喜欢用Sublime Text2,因为这个工具简洁还有多种鼠标状态提示。
你可以在chat.js文件中查看到下面这样一段代码:
if (Meteor.is_client) { Template.hello.greeting = function () { return "Welcome to chat."; }; Template.hello.events = { 'click input' : function () { // template data, if any, is available in 'this' if (typeof console !== 'undefined') console.log("You pressed the button"); } }; } if (Meteor.is_server) { Meteor.startup(function () { // code to run on server at startup }); }
在Meteor.js中注意if段落中Meteor.is_client和Meteor.is_server的两个部分。在这些区块中的代码会分开执行,当运行这段代码的机器是client端则只运行clint块中的代码,server同理。这就说明了Meteor在实际运用中的代码共享能力。
删除掉if中所有Meteor.is_client和Meteor.is_server段的代码,最后只剩下一段:
if (Meteor.is_client) { }
注意,当你保存了 脚本文件之后,你的浏览器会立刻刷新加载这段新的代码。
创建视图(View)
在我们正式对这个脚本文件动工之前, 我们需要先新建一个视图用来展示聊天记录. 在编辑器里打开chat.html并删除body标签里边的代码. 包括名为hello的template标签.只留如下部分
<head>
<title>chat</title>
</head><body>
</body>
接着在body标签里添加下面这句
{{> entryfield}}Meteor使用的模板系统与Mustache很相似.大括号{% raw %}{{}}{% endraw %}表示要呈现的内容. 通过简单地在两对大括号里添加内容如{% raw %}{{hello}}{% endraw %}, 模板系统会用hello这个变量的值来替换它. 后面会更详细的介绍.
注意到了在entryfield这个词前面有个大于号>了吗? 使用该符号来指定渲染哪一个模板.
<template name="entryfield">
<input type="text" id="name" placeholder="Name" /> <input type="text" id="message" placeholder="Your Message" />
</template>在这个例子中,template标签有单个属性, 即模板的名字, 这就是我们要渲染的模板, 注意, 模板的名字要和body里的代码指定的模板名字一样 ({{> entryfield}})









