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则不相伯仲.本文 ...
随机推荐
- Js替换地址栏参数
开了博客竟然有9个月没在来写过了.真是惭愧.今天需要用到一个用js替换地址栏参数的的功能.就自己用JS自己写了一个简单的函数.贴出来仅供大家参考.代码都写了注释.如下: /* js替换URL参数值,无 ...
- ios 视频音乐播放
IOS开发小技巧(视频和音乐播放).IOS视频播放代码(添加MediaPlayer.framework和#import) -(void)playMovie:(NSString *)fileName{ ...
- C# .NET 获取枚举值的自定义属性（特性/注释/备注）信息
一.引言 枚举为我看日常开发的可读性提供的非常好的支持,但是有时我们需要得到枚举值得描述信息或者是注释(备注)信息 比如要获得 TestEmun.aaa 属性值得备注 AAA,比较不方便得到. pub ...
- 阅读 Linux 内核源码
阅读Linux Kernel Source Code 假如你在Linux系统下面阅读Linux内核源代码,那么需要准备一些工具. ①Linux的内核源码 内核源码的下载地址:Index of /pub ...
- 安装ipython notebook
从http://cs231n.github.io/assignments2016/assignment1/开始说起,因为要学习cs231n课程,需要安装ipython notebook,原本电脑中安装 ...
- [GeekBand] C++学习笔记（2）——BigThree、OOP
本篇笔记主要分为三个部分,第一部分是以String类为例的基于对象的编程,重点在于构造与析构.拷贝构造函数.拷贝赋值函数三个重要函数.这一部分与笔记(1)中的内容结合起来就是基于对象编程的主要内容.第 ...
- 学习C++ Primer 的个人理解（十二）
动态内存与智能指针 在C++中, 动态内存用 new来分配空间并返回一个指向该对象的指针 用delete来销毁. 由于手动的对动态内存进行操作容易出现问题.所以新的标准库提供了两种智能指针. 智能指针 ...
- LinqToExcel常用对象
1.ExcelQueryFactory对象(1)获取工作表名集合IEnumerable<string> GetWorksheetNames() //获取工作薄中的工作表名 foreach ...
- AVAudioRecorder 录制音频
AVFoundation 中使用AVAudioRecorder 类添加音频录制功能是非常简单的, AVAudioRecorder构建与Audio Queue Services之上是一个功能强大且代码简 ...
- centos 挂载与卸载硬盘
fdisk -l //先查询未挂载的硬盘名如:sdb1 等 mkfs.ext3 /dev/xvdb 开始格式化 df -h mount /dev/xvdb /home 开始挂载 vi /etc/fst ...