这一课我们建立一个ember的实用程序,我们将看到如何轻松地创建一个流行的用户界面,以及在应用程序中如何链接、映射网页的URL。其实大白话就是 单击选择左面列表名字,右面显示一行全名,并且把姓和名字分别再显示一次,还有头像图片。主要关注的左边的列表如何和右面数据关联,地址栏的URL如何对应到页面。
主视图-细节视图中的:router.map ,{{outlet}},{{#linkTo}}
我们先从主视图渲染开始,课程将带着你从后往前进行讲解,为了让页面好看一些例子中用了一些bootstrap框架的 css 语句和标签。
这是主视图:
<div class="container">
<div class="row-fluid">
<ul class="nav nav-list span3 well"> // 1-3 这几行标记是引用`bootstrap`的类,意思是定义左面视图框,3个栅格单位宽,
//可以根据屏幕大小自适应调整大小;
{{#each model}} //块语句遍历顶级模版中 model提供的数据users;
<li>{{#linkTo "user" this}}{{first}}{{/linkTo}}</li> //这句是关键,把每一个 first 作为一个链接,选择后自动跳转到user路由;
{{/each}}
</ul>
<div class="span9 well">{{outlet}}</div> //意思是定义右面视图框,9个栅格单位宽,`bootstrap` 整个屏幕宽度12个栅格,
//{{outlet}} 作用是告诉ember插入user模版的相应内容;
</div>
</div>
这是定义的 App 命名空间、路由、模型和要显示的数据:
var App = Ember.Application.create();
App.ApplicationRoute = Ember.Route.extend({
model: function() { //定义顶级模版的model为其提供数据;
return users;
}
});
var users = [
{
id: 1,
first: 'Ryan',
last: 'Florence',
avatar: 'https://si0.twimg.com/profile_images/3123276865/5c069e64eb7f8e971d36a4540ed7cab2.jpeg'
},
{
id: 2,
first: 'Tom',
last: 'Dale',
avatar: 'https://si0.twimg.com/profile_images/1317834118/avatar.png'
},
{
id: 3,
first: 'Yehuda',
last: 'Katz',
avatar: 'https://si0.twimg.com/profile_images/3250074047/46d910af94e25187832cb4a3bc84b2b5.jpeg'
}
];
这里是细节视图:
<script type="text/x-handlebars" id="user"> //定义user模版,显示的内容;
<h2>
{{first}} {{last}}
<img {{bindAttr src="avatar"}} class="pull-right" width=50 />
</h2>
<dl>
<dt>First</dt>
<dd>{{first}}</dd>
<dt>Last</dt>
<dd>{{last}}</dd>
</dl>
</script>
在细节视图中使用 routes 和 {{outlet}}
在app.router.map
我们告诉路由器,我们有一个用户的资源,我们希望网址为user/:user_id
时,URL自动连接访问的路由或和模版(如userroute和user模板)。如果我们没有建立usercontroller
或userview
,ember
会创建一个默认的控制器或视图。注意路径中的动态部分:ember
将解析URL,交给路由model
的params
参数。
现在,当我们点击一下,注意到该网址是如何改变,复制并贴他们当前的URL,或使用前进后退按钮,他们总是会得到正确的路径。当构建ember
应用程序时,我们总是映射一个路径,然后在做其他事情之前先创建一个模板。
App.Router.map(function() {
this.resource('user', {path: "/users/:user_id"}); //这里定义了user的路由,对应的URL为`/users/0`或 `/users/1`或 `/users/2`,
//随着选中的不同users中ID会发生变化;
});
App.UserRoute = Ember.Route.extend({ // 定义user路由使用的数据model,参数`params`来源于 {{linkTo}} 传递过来的网址,
// ember将解析网址参数,并返回对应ID的数据;
model: function(params) {
return users[params.user_id];
}
});
完整代码:
<!DOCTYPE html>
<!--
Created using JS Bin
http://jsbin.com
Copyright (c) 2016 by symphonyh (http://jsbin.com/dojidir/1/edit)
Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<html>
<head>
<meta name="description" content="Ember: Routes, {{outlet}}, and {{#linkTo}}" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>
<meta charset=utf-8 />
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<title>Episode 003</title>
<style id="jsbin-css">
body { margin-top: 30px }
.active {
color: red !important;
}
</style>
</head>
<body>
<script type="text/x-handlebars">
<div class="container">
<div class="row-fluid">
<ul class="nav nav-list span3 well">
{{#each model}}
<li>{{#linkTo "user" this}}{{first}}{{/linkTo}}</li>
{{/each}}
</ul>
<div class="span9 well">{{outlet}}</div>
</div>
</div>
</script>
<script type="text/x-handlebars" id="user">
<h2>
{{first}} {{last}}
<img {{bindAttr src="avatar"}} class="pull-right" width=50 />
</h2>
<dl>
<dt>First</dt>
<dd>{{first}}</dd>
<dt>Last</dt>
<dd>{{last}}</dd>
</dl>
</script>
<script id="jsbin-javascript">
var App = Ember.Application.create();
App.Router.map(function() {
this.resource('user', {path: '/users/:user_id'});
});
App.UserRoute = Ember.Route.extend({
model: function(params) {
return users[params.user_id];
}
});
App.ApplicationRoute = Ember.Route.extend({
model: function() {
return users;
}
});
var users = [
{
id: 0,
first: 'Ryan',
last: 'Florence',
avatar: 'https://si0.twimg.com/profile_images/3123276865/5c069e64eb7f8e971d36a4540ed7cab2.jpeg'
},
{
id: 1,
first: 'Tom',
last: 'Dale',
avatar: 'https://si0.twimg.com/profile_images/1317834118/avatar.png'
},
{
id: 2,
first: 'Yehuda',
last: 'Katz',
avatar: 'https://si0.twimg.com/profile_images/3250074047/46d910af94e25187832cb4a3bc84b2b5.jpeg'
}
];
</script>
</body>
</html>