2015年7月22日 星期三

ember.js 學習筆記 1

要创建一个 Ember.js 应用,首先需要创建一个Ember.Application的实例,并赋值给一个全局变量。

window.App = Ember.Application.create();

创建一个Ember.Application意味着:
  1. 它是你应用的命名空间,应用里面所有的类都会作为它的属性去定义(例如:App.PostsViewApp.PostsController)。这样避免你污染了公共的域。
  2. 它为你添加了网页事件监听器,并且负责把事件委派到你的视图。(参看视图层
  3. 它会自动帮你渲染应用模板模板。
  4. 它会基于当前的路径,选择需要显示的模板和模型,自动帮你创建一个路由,并开始路由。
应用模板是应用启动的时候默认渲染的模板。
你应该把你的header、footer和其他装饰性的内容放在应用模板里面。另外,应用模版中至少需要一个{{outlet}}占位符,以便路由能根据当前的URL将适当的模版渲染进来。
<header>
  <h1>Igor's Blog</h1>
</header>

<div>
  {{outlet}}
</div>

<footer>
  &copy;2013 Igor's Publishing, Inc.
</footer>

其中header和footer会一直显示在屏幕上,不过<div>里面的内容会根据用户所在位置而改变(/posts/posts/15之类)。

如果你希望将应用模板放置在HTML文档中,你可以创建一个不带模板名字的<script>标签。Ember将使用这个没有命名的模板作为应用的模板,会将其编译和加载到页面。

<script type="text/x-handlebars">
  <div>
    {{outlet}}
  </div>
</script>

Ember.js 使用 Handlebars模板库 来增强你的应用程序的用户界面。Handlebars模板与普通的HTML类似,但是它还提供了嵌入表达式来改变显示内容的功能。

我们采用了Handlebars,并且还使用许多强大的功能对其进行了扩展。为了有助于理解,你可以认为Handlebars模板是一种用于描述你的应用程序界面的类HTML的DSL。而且,一旦使用Ember.js在屏幕上渲染一个模板,开发人员就不需要编写额外的代码来确保其更新。

如果你没有在使用构建工具,你仍然可以在HTML文档中定义应用程序的主模板,只需要在HTML中加上<script>标签,如下所示:

<html>
  <body>
    <script type="text/x-handlebars">
      Hello, <strong>{{firstName}} {{lastName}}</strong>!
    </script>
  </body>
</html>

你也可以为模板定义一个名称,以便复用。例如,你可能想定义一个在多个不同的应用程序用户界面处都可以使用的可重用控件。 如果只是希望Ember.js先保存模板留做复用,而不是即时显示,那么可以使用data-template-name属性:

<html>
  <head>
    <script type="text/x-handlebars" data-template-name="say-hello">
      <div class="my-cool-control">{{name}}</div>
    </script>
  </head>
</html>

沒有留言:

張貼留言