Ember.js demo5
<!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="http://ember101.com/jsbin/ember.rc3.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 5</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>
{{#linkTo "editUser" this class="btn btn-primary"}}Edit{{/linkTo}}
</script> <script type="text/x-handlebars" id="editUser">
<h2>Edit User</h2>
<form class="form-inline" {{action save on="submit"}}>
<label>
First:
{{input type="text" value=first}}
</label><br> <label>
Last:
{{input type="text" value=last}}
</label> <div class="controls">
<button type="submit" class="btn btn-primary">Done</button>
</div>
</form>
</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'});
this.resource('editUser', {path: '/users/:user_id/edit'});
}); App.ApplicationRoute = Ember.Route.extend({
model: function() {
return users;
}
}); App.UserRoute = Ember.Route.extend({
model: function(params) {
return users[params.user_id];
}
}); App.EditUserRoute = Ember.Route.extend({
model: function(params) {
return users[params.user_id];
}, events: {
save: function() {
var user = this.modelFor('editUser');
this.transitionTo('user', user);
}
}
}); 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 demo5的更多相关文章
- 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则不相伯仲.本文 ...
随机推荐
- 你所不知道的Html5那些事(一)
文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后 ...
- net下 Mysql Linq的使用, 更新数据,增加数据,删除数据
net下访问mysql主要有2种方法: 1.字符串拼接访问 a.mysql官网下载并安装mysql-connector-net. b项目中引用mysql.data等 所有增删改查可以通过拼接sql语句 ...
- mongodb 数据备份,还原笔记
公司数据库迁移,所以补充了一下知识: 1 集合的导入和导出 命令行帮助 mongoexport --help 导出 导出 newsServer 数据库下 news 集合 mongoexport - ...
- [PR & ML 2] [Introduction] Example: Polynomial Curve Fitting
啊啊啊,竟然不支持latex,竟然HTML代码不能包含javascript,代码编辑器也不支持Matlab!!!我要吐槽博客的编辑器...T_T只能贴图凑合看了,代码不是图,但这次为了省脑细胞,写的不 ...
- C#与C++相比较之STL篇(续一)
本篇接<C#与C++相比较之STL篇>,主要探索C++STL的两个组件:算法和仿函数,以及C#的linq和拉姆达表达式.委托. STL的算法与仿函数 算法是个庞大的主题,STL包含了超过1 ...
- fuser 命令概述
fuser 概述 fuser命令是用来显示所有正在使用着指定的file, file system 或者 sockets的进程信息. 例一: #fuser –m –u /mnt/usb1 /mnt/us ...
- AD,Group
DataTable dtUser = GetEmptyDT(); Dictionary<DirectoryEntry, string> test1 = GetUserAndGroup(cl ...
- js清空web用户控件的值
假设你的用户控件里面有: <asp:DropDownList ID="DropDownList1" runat="server"> <asp: ...
- C# 创建XML文档
有些时候我们需要生成一个xml文档作为数据交换的容器.当然我们用拼接字符串的方法来进行构建xml,但是这种方法虽然简单有效,但是如果xml文档结构过于复杂,拼接字符串会让人眼花缭乱.这时候就需要C#给 ...
- nginx禁止目录php执行权限
nginx禁止目录php执行权限,找到配置fastcgi.conf文件,一般在/usr/local/nginx/conf/下面,修改如下 location ~* ^/(data|uploads|tem ...