<!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. java基础之Java变量命名规范

    本文介绍的是java中的变量的命名规则,对于初学者来说,还是很重要的.希望对你有帮助,一起来看. Java是一种区分字母的大小写(case-sensitive)的语言,下面谈谈Java语言中包.类.变 ...

  2. UISearchController的使用。(iOS8+)

    这种方法早就发现了,不过一致没用,今天拿过来用,发现了一些问题. 1.这个东西和表视图结合使用很方便,首先,创建新的工程,将表视图控制器作为工程的根视图,并且添加一个导航(当然,你可以不这样做,但是你 ...

  3. 暑假集训(2)第七弹 -----今年暑假不AC(hdu2037)

    J - 今年暑假不AC Crawling in process... Crawling failed Time Limit:1000MS     Memory Limit:32768KB     64 ...

  4. async:false同步请求,浏览器假死

    // 异步请求导致数据错乱 // function get_num(){ // $("input[name='monitor']").eq(1).attr('checked',tr ...

  5. Javascript访问css样式信息

    DOM2级样式为style对象定义了一些属性和方法,可以通过这些方法属性来访问或者修改元素的样式信息: 1.cssText:可读写,在读的情况下以字符串形式返回元素的css代码,在写的情况下以字符串形 ...

  6. gb2312编码提交url乱码解决

    gb2312编码提交url,服务器接收时出现乱码,用System.Web.HttpUtility.UrlDecode();解码 ,还是出现乱码,困老了我好长时间,终于在google上找到了解决办法. ...

  7. Unity3D--学习太空射击游戏制作(三)

    步骤四:创建敌人 创建敌人的方式与创建主角类似,不过敌人的行为需要由计算机来控制,它将从上方迎着主角缓慢飞出来,并左右来回移动: 01:创建Enemy.cs脚本,添加代码: using UnityEn ...

  8. live 写博

    1           2           3           4           5         1       2       3       4       5         ...

  9. 教育O2O在学校落地,学堂在线瞄准混合式教学

    (大讲台—国内首个it在线教育混合式自适应学习平台.) 进入2015年,互联网教育圈最火的词非“教育O2O”莫属.不断刷新的融资金额和速度,不断曝光的正面和负面新闻,都让教育O2O公司赚足了眼球.然并 ...

  10. Sybase ASE无响应的又一个情况

    昨天下午,客户那边的系统管理员给我电话,说有套系统的SYBASE数据库最近有点怪,总是时不时莫名其妙地就忽然卡死,有可能一下子就自动恢复了,也有可能后面一直卡住,只好重启.根据客户反映的状况,初步判断 ...