Ember.js 模板和应用程序

模板（Handlebars）

Ember.js使用的是Handlebars模板引擎，在我们开始使用之前，首先让我们先简单介绍一下handlebars.js；如果大家有使用过jQuery模板或其他脚本模板，那么对于掌握handlebars.js的使用就没有太大的困难了，如果确实没有使用过也不用担心，因为handlebars.js的使用也是挺简单的。

它让开发人员可以混合原始HTML和Handlebars表达式生成渲染相应的HTML；表达式以包括在{{}}中，我们可以通过两种方法把Handlebars模板加载到页面中，我们可以直接内嵌的html页面中，通过在页面中添加类型为text/x-handlebars的脚本标记内；或保存到以handlebars或hbs为后缀的文件中，然后通过Ember.js加载到页面中。

为了简单起见，我们把Handlebars脚本直接嵌入到index.html页面中。

<script type="text/x-handlebars" data-template-name="application">
        <h1>Employee System</h1>    
        {{outlet}}
</script>

上面，我们定义了模板application，并且添加了Handlebars表达式{{outlet}}，它的作用就类似一个占位符，告诉Ember这里的内容要动态地加载到页面当中，当我们在浏览器中打开index页面并没有显示模板中的信息。

应用程序（Application）

这是由于我们还没有定义Ember程序，每个Ember应用程序都需要一个Ember应用程序实例，接下来让我们在app.js中创建第一个Ember应用程序实例吧！

首先，我们创建一个Ember应用程序实例，具体实现如下：

// Creates an application instance.
App = Ember.Application.create();

上面，我们定义了一个名为 App 的Ember应用程序，当然我们可以把程序命名为任意的，但有一点我们要注意的是Ember要求变量的名称都以大写字母开头。

现在，我们在浏览器中打开页面，可以显示模板加载的信息了。

Index页面

也许有人会问Ember怎么知道哪些模板需要加载呢？更重要的一点是，我们并没有告诉Ember要加载的模板名称，我们只是直接把模板application嵌入到页面中。

其实，这里有个“潜规则”：如果我们没有定义ApplicationView（应用程序视图），那么Ember会自动生成一个ApplicationView并且默认加载名为application的模板，假设，我们把模板重命名为application1，那么默认的ApplicationView将找不到要加载的模板。

当然，我们也可以通过定义ApplicationView来指定需要加载的模板名称，具体实现如下：

// Defines an application view, then loading
// relative templates.
App.ApplicationView = Ember.View.extend({
  templateName: 'application1'
});

现在，我们还有一个疑问就是表达式{{outlet}}中的内容该如何加载显示呢？

转载本站内容时，请务必注明来自W3xue，违者必究。