Ember.js demo3
<!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的更多相关文章
- 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 的目的是 ...
- 【前端】Ember.js学习笔记
Model 在默认情况下,model钩子返回的值,会设置为关联的控制器的model属性.例如,如果App.PostsRoute通过model钩子返回了一个对象,这个对象会设置为App.PostsCon ...
- Ember.js 的视图层
本指导会详尽阐述 Ember.js 视图层的细节.为想成为熟练 Ember 开发者准备,且包 含了对于入门 Ember 不必要的细节. Ember.js 有一套复杂的用于创建.管理并渲染连接到浏览器 ...
- Ember.js入门教程、博文汇总
第一章 对象模型 Ember.js 入门指南——类的定义.初始化.继承 Ember.js 入门指南——类的扩展(reopen) Ember.js 入门指南——计算属性(compute properti ...
- 点燃圣火！ Ember.js 的初学者指南
现在,到处都可以看到复杂的 JavaScript 应用程序. 由于这些应用程序变得越来越复杂,一长串的 jQuery 回调语句,或者通过应用程序在各个点执行不同的函数调用,这些都变得无法再让人接受. ...
- Ember.js之动态创建模型
本人原文地址发布在:点击这里 What problem did we meet? As ember document suggestion, we may define a model as a st ...
- Ember.js实现单页面应用程序
1.1.1 摘要 单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序. SPA使用AJAX和HTML5创建流畅且响应迅速的Web应用程序,不会经常 ...
- Ember.js系列文章
JS前端框架之Ember.js系列文章 本文为文章索引,主要是罗列Ember.js的相关文章便于阅读. 相关演示代码:github for free. 基础篇 1. EmberJs之What|Why| ...
- 【JavaScript】前端开发框架三剑客—AngularJS VS. Backone.js VS.Ember.js
摘要:透过对Github,StackOverflow,YouTube等社区进行数据收集后可知,AngularJS在各大主流社区中都是最受欢迎的,Backbone.js与Ember.js则不相伯仲.本文 ...
随机推荐
- spring mvc 全局异常处理
package com.tool; public class MyException extends Exception{ public String Msg; public String ErrCo ...
- Poj/OpenJudge 1094 Sorting It All Out
1.链接地址: http://poj.org/problem?id=1094 http://bailian.openjudge.cn/practice/1094 2.题目: Sorting It Al ...
- Windows Phone 动态改变ListBox样式
使用ListBox时通常会借助ItemTemplate帮助我们实现更复杂多样的样式显示,体现了Xaml的灵活.如何动态改变变ListBox的样式,实现类似电脑资源管理器中列表显示和图标显示形式的替换. ...
- PHPstrom2016.1激活与汉化【2016.06.21依旧可用】
: 目前的网络上有很多的关于PHPstrom激活的方法,但是很多都失效了,没有具体的使用日期,这个是我从其他网友那里转载过来的,具体地址忘记了: 方法如下: 需要在联网条件下,打开PHPstrom,在 ...
- linux系统使用密钥登录设置
使用密钥登录linux的操作步骤(使用putty): 1.用putty远程登录linux服务器,然后使用puttygen生成密钥,将生成的密钥保存,保存私钥将公钥复制保存到linux服务器的autho ...
- 发光的input框(纯css实现)
css代码: input{width: 200px;height: 40px;} input.focus{border-color: #08c;box-shadow: 0 0 4px #8bd6fb; ...
- jsoup 对网页中图片解析
Elements article = new Elements(); Elements Img = new Elements(); article = doc.select("div#con ...
- composer php依赖管理工具
#composer是什么 Composer 是 PHP 的一个依赖管理工具.它允许你申明项目所依赖的代码库,它会在你的项目中为你安装他们. composer出现之前我们php项目依赖管理大部分都是手动 ...
- Python prettytable的使用方法
Python prettytable的使用方法 prettytable可以整齐地输出一个表格信息: +-----------+------+------------+----------------- ...
- eclipse:java.lang.OutOfMemoryError: PermGen space 最简单的解决方式
我使用的工具是STS, Eclipse同理: 打开如下界面: 左则选择项目启动使用的Tomcat-->在右侧面板Tab项中选择" Arguments":在VM argumen ...