<!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. HashMap使用

    /* * 测试HashMap的应用,判断 */ import java.util.HashMap; public class HuaWeiTest { private static final Int ...

  2. 第六篇、git常用的命令

    1.oscine git服务器地址 https://git.oschina.net/ 2.帐号:18775134221@163.com 密码:562011 3.创建私有的仓库 4.使用命令 4.1 配 ...

  3. spring mvc 多视图配置

    <!-- jsp视图解析器--> <bean id="viewResolver" class="org.springframework.web.serv ...

  4. Golang，用map写个单词统计器

    Golang中也有实用的泛型编程模板.如map.据Go官方团队称,其实现为Hash表,而非类似cpp或Java的红黑树.所以理论上速度更能快上几个等级(Hash与红黑树的效率对比可以看我的文章C++中 ...

  5. 重置mysql管理员密码

    重置管理员密码 1.关闭mysql 2.开启mysql,跳过授权表mysql服务 提示:如果此步骤操作成功,那么任何用户登陆MySQL都不需要用户名与密码 保持此窗口不能关闭 3.重新cmd,登陆 m ...

  6. 删除Windows 文本右键选项

    删除Windows 文本右键选项 在Windows上用所谓的绿色版安装了EditPlus,但是给的卸载程序(即删除掉注册表相应的选项)无法使用,导致只能手动从Regedit(注册表-编辑器)中手动删除 ...

  7. [翻译][MVC 5 + EF 6] 10：处理并发

    原文:Handling Concurrency with the Entity Framework 6 in an ASP.NET MVC 5 Application 1.并发冲突: 当一个用户编辑一 ...

  8. 通过 ANE(Adobe Native Extension) 启动Andriod服务 推送消息(二)

    着手改造之前,有兴趣可以阅读下官方文档:http://help.adobe.com/zh_CN/air/extensions/index.html 新建工程 NavService 并创建包 nav.w ...

  9. A Case for Flash Memory SSD in Enterprise Database Applications

    通过分析固态硬盘的特性对数据库中不同对象,如:表,索引,回滚段,重做日志等的应用进行具体研究,最后将数据库中不同的对象进行区别应用

  10. 【应用】：shell crontab定时生成oracle表的数据到txt文件，并上传到ftp

    一.本人环境描述      1.oracle服务端装在win7 32位上,oracle版本为10.2.0.1.0      2.Linux为centos6.5 32位,安装在Oracle VM Vir ...