ember.js101 入门教程第三课

最新推荐文章于 2021-02-23 11:12:47 发布

weixin_33862514

最新推荐文章于 2021-02-23 11:12:47 发布

阅读量98

点赞数

原文链接：http://www.cnblogs.com/cloudhan/p/5428312.html

版权

一个最常见的用户界面任务是显示一个列表的东西。本课程的例子是要在页面上显示的用户列表，用到的知识主要就是handlebars.js模版表达式。

显示一个数据列表和模板

json（http://www.json.org.cn/）格式的数据，需要的话可以看看链接
我们要显示要显示的数据如下：

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'
  }
];

核心的语句就是这几句：

<ul class="nav well">
  {{#each user in model}}  //{{each}}是块表达式，用来遍历model中每一个用户；
    <li>{{user.first}} {{user.last}}</li>  //用来显示用户的名字；
  {{/each}}  //块表达式结束
</ul>

我们还是定义一个命名空间和路由，并且定义给该路由提供数据的模型model：

var App = Ember.Application.create();

App.ApplicationRoute = Ember.Route.extend({
  model: function() {
    return users;
  }
});

要显示用户列表的代码：

ul class="nav well">
  {{#each model}}  //{{each}}块语句遍历模型中的每一个数据；
    <li>{{first}} {{last}}</li>
  {{/each}}
</ul>

这个例子很简单，其实使用默认顶级模版Application就够了，但如果显示的内容很多，都放在顶级模版里可能不是个好的选择，模版里的内容会看起来相当复杂；这里我们不采用顶级模版，另外定义一个新的user的模版。

<script type="text/x-handlebars" data-template-name="user">
  <li>
    <p>
      <img {{bindAttr src="avatar"}}> //{{bindAttr}}表达式用来绑定一个model提供的 需要渲染的用户图片的地址;
      <b>{{first}} {{last}}</b>       //绑定一个model提供的 需要渲染的用户姓名;
    </p>
  </li>
</script>

你可能已经看出来了，user模板里定义了显示了客户的头像、姓名的表达式，那顶级模板Application里的{{each}}语句怎么使用这个模版的渲染呢？

<ul class="nav well">

  {{#each model}}

    {{render "user" this}}  //由于新定义的`user`模版，已经定义了显示客户头像、姓名的块语句，这里只需要告诉`ember`找到`user`模版渲染遍历到的用户数据，
                            //就可以在页面显示出来了；参数`this`是上下文，在这里每一个数据单位是一位用户，用户数据成了模版`user`的上下文；
  {{/each}}
</ul>

完整代码：


<!DOCTYPE html>
<!--
Created using JS Bin
http://jsbin.com

Copyright (c) 2016 by symphonyh (http://jsbin.com/cidipam/1/edit)

Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<html>
<head>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
  <script src="http://ryanflorence.com/ember.min.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>JS Bin</title>
<style id="jsbin-css">
img {
  width: 50px;
  margin-right: 10px;
}
</style>
</head>
<body>
  
  <script type="text/x-handlebars">   // Application 顶级模版;
    <ul class="nav well">
      {{#each model}}
        {{render "user" this}}
      {{/each}}
    </ul>
  </script>
  
  <script type="text/x-handlebars" id="user">  //user 模版；
  <li>
    <p>
      <img {{bindAttr src="avatar"}}>
      <b>{{first}} {{last}}</b>
    </p>
  </li>
  </script>
  
  
<script id="jsbin-javascript">
var App = Ember.Application.create();

App.ApplicationRoute = Ember.Route.extend({
  model: function() {
    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>
</body>
</html>

转载于:https://www.cnblogs.com/cloudhan/p/5428312.html