<!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. DIV+CSS相对IE8的兼容问题

    CSS技巧: 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容 ...

  2. textLayout在快速输入清除时报错解决方法

    var tf:TextFlow; var len:int = tf.numChildren;for (var i:int = 0; i < len; i += 1){ tf.removeChil ...

  3. linux下搭建nginx+php(FastCGI)+mysql运行环境

    一.安装环境 1.CentOS5.5 2.php5.4 3.MySQL5.5.19 二.安装程序依赖库和开发环境 为了省事把所需要的库文件全都安装上,可以使用rpm包安装,也可以用yum命令安装, 1 ...

  4. 第9条：覆盖equals时总要覆盖hashCode

    在每个覆盖equals方法的类中,也必须覆盖hashCode方法.否则,会违反Object.hashCode的通用约定,从而导致该类无法结合所有基于散列的集合一起正常工作,包括HashMap,Hash ...

  5. Finding a needle in Haystack: Facebook’s photo storage

    http://www.importnew.com/3292.html 面向对象存储系统

  6. jQuery—一些常见方法（3）【width(),innerWidth(),outerWidth()】

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. [数据库连接字符串] Access 连接字符串

    [数据库连接字符串] Access 连接字符串 //ODBC 标准安全策略 Driver={Microsoft Access Driver (*.mdb)};Dbq=C:\mydatabase.mdb ...

  8. MVC+EF 随笔小计——NuGet程序包管理

    安装EF 打开 工具-库程序包管理器-程序包管理器控制台 输入 install-package entityframework 去MSDN上查看下EF的架构图:http://msdn.microsof ...

  9. 今年的IT大趋势是虚拟现实

    从今年下半年开始,陆陆续续出现了一些基于虚拟现实技术的创业公司,先是从IT新闻中的一篇创业故事中了解到这个方向,后来再是身边一个以前的朋友也发布了类似的产品. 从他们的产品来看,基本都是围绕教育行业开 ...

  10. 一步步学习ASP.NET MVC3 (2)——入门程序

    请注明转载地址:http://www.cnblogs.com/arhat 在上一节中,我们只是简单的介绍了什么是MVC及MVC的运行原理.而本节呢,主要来实现下一ASP.NET MVC3的开发流程,并 ...