<!DOCTYPE html>

<html>

<head>

<script src="http://code.jquery.com/jquery.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>

  <script src="//ryanflorence.com/ember.min.js"></script>

<meta charset=utf-8 />

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">

<title>JS Bin</title>

</head>

<body>

  <script type="text/x-handlebars">

    <ul class="nav well">

      {{#each model}}

        {{render "user" this}}

      {{/each}}

    </ul>

  </script>

  <script type="text/x-handlebars" id="user">

  <li>

    <p>

      <img {{bindAttr src="avatar"}}>

      <b>{{first}} {{last}}</b>

    </p>

  </li>

  </script>

</body>

</html>
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'

  }

];
img {

  width: 50px;

  margin-right: 10px;

}

Ember.js demo3的更多相关文章

  1. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  2. 【前端】Ember.js学习笔记

    Model 在默认情况下,model钩子返回的值,会设置为关联的控制器的model属性.例如,如果App.PostsRoute通过model钩子返回了一个对象,这个对象会设置为App.PostsCon ...

  3. Ember.js 的视图层

    本指导会详尽阐述 Ember.js 视图层的细节.为想成为熟练 Ember 开发者准备,且包 含了对于入门 Ember 不必要的细节. Ember.js 有一套复杂的用于创建.管理并渲染连接到浏览器 ...

  4. Ember.js入门教程、博文汇总

    第一章 对象模型 Ember.js 入门指南——类的定义.初始化.继承 Ember.js 入门指南——类的扩展(reopen) Ember.js 入门指南——计算属性(compute properti ...

  5. 点燃圣火！ Ember.js 的初学者指南

    现在,到处都可以看到复杂的 JavaScript 应用程序. 由于这些应用程序变得越来越复杂,一长串的 jQuery 回调语句,或者通过应用程序在各个点执行不同的函数调用,这些都变得无法再让人接受. ...

  6. Ember.js之动态创建模型

    本人原文地址发布在:点击这里 What problem did we meet? As ember document suggestion, we may define a model as a st ...

  7. Ember.js实现单页面应用程序

    1.1.1 摘要 单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序. SPA使用AJAX和HTML5创建流畅且响应迅速的Web应用程序,不会经常 ...

  8. Ember.js系列文章

    JS前端框架之Ember.js系列文章 本文为文章索引,主要是罗列Ember.js的相关文章便于阅读. 相关演示代码:github for free. 基础篇 1. EmberJs之What|Why| ...

  9. 【JavaScript】前端开发框架三剑客—AngularJS VS. Backone.js VS.Ember.js

    摘要:透过对Github,StackOverflow,YouTube等社区进行数据收集后可知,AngularJS在各大主流社区中都是最受欢迎的,Backbone.js与Ember.js则不相伯仲.本文 ...

随机推荐

  1. 修改arcgis server默认js和css连接地址

    当使用ArcGIS Server 10.1发布了一个地图服务之后,在ArcGIS Server 10.1的机器上使用浏览器进入http://localhost:6080/arcgis/rest/ser ...

  2. cisco通过控制口或者通过远程配置交换机

    学而不思则罔,思而不学则殆,每天坚持一小步,则成功一大步 下面我们通过Cisco Packet来模拟交换机和路由器的远程和控制台登录配置交换机. 交换机console口的连接与配置方法 (1),在Ci ...

  3. docker+tomcat+java配置（ubuntu）

    原创文章,转载请注明出处. 本文是基于ubuntu14.04搭建的dosker,tomcat配置是在docker容器外面(为了方便查看日志)使用的是docker启动挂载,该tomcat工程依赖于doc ...

  4. MongoDB的timezone问题

    MongoDB是以UTC格式来存储所有时间的,查询的时候也是返回UTC时间,不提供在数据库连接级别的timezone支持,这就带来一个问题:无法使用groupby对日期进行聚合,因为你所在的timez ...

  5. aspx页面状态管理Cookie和ViewState

    Cookie 设置cookie protected void Button2_Click(object sender, EventArgs e) { HttpCookie cookie = new H ...

  6. CheckedListBox与下拉框联动代码

    private void yewubind(string id) { //给业务类型下拉框绑定业务类型数据 DataTable dtyewu = sb.SelectLast(id, 0); bool ...

  7. Modernizr.js介绍与使用

    Modernizr帮助我们检测浏览器是否实现了某个feature,如果实现了那么开发人员就可以充分利用这个feature做一些工作,反之没有实现开发人员也好提供一个fallback.所以,我们要明白的 ...

  8. MySQL基础学习之索引

    创建新表新索引 CREATE TABLE 表名(数据名 类型,INDEX  索引名称(属性)) 创建存在表的索引 CREATE INDEX 索引名称  ON 表名(属性) 修改索引 ALTER TAB ...

  9. 最近在无线USB网卡投入比较大

    第一次(40): 乐光N18网卡 17 5米USB延长线 10 DVD2 3 运费10 第二次(30): 8187L主板13 5DB/6DB全向天线 5 外壳FREE 运费12 第三次(20): 8D ...

  10. Codeforces Round #345 (Div. 1) B. Image Preview

    Vasya's telephone contains n photos. Photo number 1 is currently opened on the phone. It is allowed ...