Ember.js demo4
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Ember: Routes, {{outlet}}, and {{#linkTo}}" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>
<meta charset=utf-8 />
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<title>Episode 003</title>
</head>
<body> <script type="text/x-handlebars">
<div class="container">
<div class="row-fluid">
<ul class="nav nav-list span3 well">
{{#each model}}
<li>{{#linkTo "user" this}}{{first}}{{/linkTo}}</li>
{{/each}}
</ul>
<div class="span9 well">{{outlet}}</div>
</div>
</div>
</script> <script type="text/x-handlebars" id="user">
<h2>
{{first}} {{last}}
<img {{bindAttr src="avatar"}} class="pull-right" width=50 />
</h2>
<dl>
<dt>First</dt>
<dd>{{first}}</dd>
<dt>Last</dt>
<dd>{{last}}</dd>
</dl>
</script> </body>
</html>
body { margin-top: 30px } .active {
color: red !important;
}
var App = Ember.Application.create(); App.Router.map(function() {
this.resource('user', {path: '/users/:user_id'});
}); App.UserRoute = Ember.Route.extend({
model: function(params) {
return users[params.user_id];
}
}); App.ApplicationRoute = Ember.Route.extend({
model: function() {
return users;
}
}); var users = [
{
id: 0,
first: 'Ryan',
last: 'Florence',
avatar: 'https://si0.twimg.com/profile_images/3123276865/5c069e64eb7f8e971d36a4540ed7cab2.jpeg'
},
{
id: 1,
first: 'Tom',
last: 'Dale',
avatar: 'https://si0.twimg.com/profile_images/1317834118/avatar.png'
},
{
id: 2,
first: 'Yehuda',
last: 'Katz',
avatar: 'https://si0.twimg.com/profile_images/3250074047/46d910af94e25187832cb4a3bc84b2b5.jpeg'
}
];
Ember.js demo4的更多相关文章
- 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则不相伯仲.本文 ...
随机推荐
- <转载>国外程序员推荐的免费编程书籍资源
一.George Stocker 提供了一大串,分类如下: How to Design Programs: An Introduction to Computing and Programming 2 ...
- SC命令---安装、开启、配置、关闭 cmd命令行和bat批处理操作windows服务
一.cmd命令行---进行Windows服务操作 1.安装服务 sc create 服务名 binPath= "C:\Users\Administrator\Desktop\win32s ...
- JavaScript基础-面向对象编程<2>
2.动态添加,修改和删除对象属性和方法 例如:用类Object()创建一个空对象user,然后修改其行为. (1) 添加属性 var user=new Object(); //创建一个没有属性和方法的 ...
- 客户调用COM流程
参考:COM技术内幕 DllGetClassObjecthttps://msdn.microsoft.com/en-us/library/windows/desktop/ms680760.aspx ...
- PHP学习笔记——上传文件到服务端的文件夹下
环境 开发包:appserv-win32-2.5.10 服务器:Apache2.2 数据库:phpMyAdmin 语言:php5,java 平台:windows 10 需求 编写一个PHP脚本页面,可 ...
- 图片裁切插件jCrop的使用心得(三)
在这一篇里,我来具体讲讲代码该如何写. 下面是jCrop的初始化代码 //图片裁剪插件Jcrop初始化 function initJcrop() { // 图片加载完成 document.getEle ...
- prefixfree.js介绍
假如你现在正学习着强大的Css3,你知道Css3的很多数属性为实验属性,使用他们的时候得加上各式各样的浏览器前缀.可能你默默忍受了,因为还没到统一的时间.有没想过给自己减下负,偶然间在网上看到一个js ...
- PHP 5.6.6 上运行 ecshop 2.7.3 不兼容问题整合
在安装完php在自己的服务器上以后, 发现在静态网页上出现了很多 error. 在网上查找过后发现,大部分问题是因为 PHP发展到PHP5.5版本以后,有了很多细微的变化.而ECSHOP官方更新又太慢 ...
- Python OptionParser学习
from optparse import OptionParser import sys def main(): p = OptionParser() p.add_option('-n','--nam ...
- Educational Codeforces Round 7 F - The Sum of the k-th Powers 拉格朗日插值
The Sum of the k-th Powers There are well-known formulas: , , . Also mathematicians found similar fo ...