ember尝试进行模版与路由操作

木来 木来

接下来,让我们通过ember命令来创建一个新的模板:

ember generate template application

application模板将总是出现在用户的浏览器上。使用你的编辑工具打开app/templates/application.hbs文件,然后添加如下内容:

app/templates/application.hbs

<h1>PeopleTracker</h1>

{{outlet}}

请注意,ember会在后台检测该模板文件并自动的重载该模板对应的页面。

你应该会发现之前的欢迎页面不见了,取而代之的是”PeopleTracker”的大标题。

当然你也会对{{outlet}}感到好奇,它表明任何嵌套的路由所对应的内容都会被渲染到{{outlet}}所在的那个位置。

定义路由

让我们的应用来展示一个包含科学家名字的列表吧。为了达到这个目的,我们首先要创建一个路由。目前,你可以把路由当做一个能给你应用输送不同页面的东西。

Ember 配备了一个生成器可以自动的为你生成样板代码。要创建一个路由,输入下面这行代码:

ember generate route scientists

然后你将看到如下的输出信息:

图片.png

Ember向你展示了它都创建了哪些东西:

  1. 一个当用户访问 /scientists时,被展示的模板
  2. 一个可以给模板提供模型的路由
  3. 在app/router.js 中添加了一条路由记录
  4. 一个单元测试文件

打开这个新生成的模板文件:app/templates/scientists.hbs,在里面添加如下的HTML代码:

app/templates/scientists.hbs

<h2>List of Scientists</h2>

用你的浏览器访问http://localhost:4200/scientists这个地址。你将看到scientists.hbs模板中的 <h2>标题跟在application.hbs模板中的 <h1>标题之后。

那么,现在我们得到了被渲染过的scientists模板。接下来,让我们给它一些数据吧。我们通过编辑app/routes/scientists.js来造一些数据.

我们在生成器创建好的app/routes/scientists.js中添加一个model()方法:

app/routes/scientists.js

import Ember from 'ember';
export default Ember.Route.extend({
  model() {
    return ['Marie Curie', 'Mae Jemison', 'Albert Hofmann'];
  }
});

(以上代码使用的最新的javascript语法,请参阅ECMAscript6语法)

你可以在model()方法中返回任何你想传递给模板的数据。如果你想通过异步的方式获取数据,那么仍然可使用model()方法,它支持任何使用Javascript Promise的库。

好了,现在让我们告诉Ember怎么把上面的数组嵌入HTML中。打开scientists模板文件,为它添加一些Handlerbars代码,让Handlerbars循环打印出这些数据:

app/templates/scientists.hbs

<h2>List of Scientists</h2>

<ul>
  {{#each model as |scientist|}}
    <li>{{scientist}}</li>
  {{/each}}
</ul>

在这里,我们借助于each助手来循环遍历出我们提供的数组中的数据。并且将数据都显示在 <li> 元素中。

创建UI组件

随着应用发展的越来越复杂,你注意到需要有一些可以复用的UI单元。Ember提供了可复用的组件,帮助你轻松实现这个目的。

现在让我们创建一个名叫 people-list的组件。实际上它是可以被复用的,在你任何需要它的地方引用它即可。

向之前一样,我们通过生成器来创建组件。命令如下:

ember generate component people-list

然后把scientists模板中的代码粘贴到people-list组件的模板中,让它看起来向这样:

app/templates/components/people-list.hbs

<h2>{{title}}</h2>
<ul>
  {{#each people as |person|}}
    <li>{{person}}</li>
  {{/each}}
</ul>

[注意]:现在的标题不是之前硬编码的”List of Scientists”了,而是一个动态的属性{{title}}。并且把scientists变量改成了更具有一般性的person变量,减少了使用时的耦合度。

保存这个模板,并且返回到scientists模板。并且修改scientists模板至如下方代码。组件的构成元素跟HTML的标签挺相似,但是注意了,组件中是用两个”{{ }}”来包裹它的内容– {{component}}。接下来我们要让组件做一些事情:

通过title属性告诉组件我们想要什么样的标题
通过people属性告诉组件我们要哪些人。

app/templates/scientists.hbs
{{people-list title="List of Scientists" people=model}}

好了,返回到浏览区。这时候你应该看到UI跟之前一样。不同之处在于我们是用可复用的组件来完成,并且复用性和可维护性更优。

点击事件

到目前为止,我们的应用已经可以展示数据了,但是仍然不能和用户交互。在web应用中,我们通常会监听用户事件,比如点击事件等。Ember使它变得更容易实现。
第一、在people-list组件中的

  • 元素上添加action助手。

app/templates/components/people-list.hbs

<h2>{{title}}</h2>
<ul>
  {{#each people as |person|}}
 <!--   <li>{{person}}</li>   -->
    <li {{action "showPerson" person}}> {{person}}</li>
  {{/each}}
</ul>

action助手可以让你在元素上绑定指定名称的事件监听函数。默认的,action助手会对点击事件进行监听,但是也可以指定它监听任何的DOM事件。好了,现在

  • 元素会在被点击时触发事件,并调用在 pelple-list组件中的showPerson回调函数。就跟这样的形式类似”this.actions.showPerson(person)”。

为了处理这个函数调用,我们需要在people-list组件中添加这个函数。
在组件中定义actions对象,并在actions对象中添加showPerson函数,并且接受在模板传入的参数:

app/components/people-list.js

import Ember from 'ember';
export default Ember.Component.extend({
  actions: {
    showPerson(person) {
      alert(person);
    }
  }
});

好了,让我们在浏览器上试试点击科学家的名字吧。

0 条评论