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则不相伯仲.本文 ...
随机推荐
- java基础之Java变量命名规范
本文介绍的是java中的变量的命名规则,对于初学者来说,还是很重要的.希望对你有帮助,一起来看. Java是一种区分字母的大小写(case-sensitive)的语言,下面谈谈Java语言中包.类.变 ...
- 安装sinopia-ldap
背景: 已经安装好sinopia,配置好本地npm源 安装sinopia-ldap: npm install -g sinopia-ldap 配置: 修改sinopia的配置文件config.yaml ...
- JS学习之表格的排序
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Java实战之02Hibernate-06处理并发
十三.处理并发 1.事务的隔离级别 不考虑隔离级别出现的问题: 脏读:一个线程中的事务读到了另外一个线程中未提交的数据. 不可重复读:一个线程中的事务读到了另外一个线程中提交的update(更新)的数 ...
- 【HeadFirst设计模式】10.状态模式
定义: 允许对象在内部状态改变时改变它 行为,对象看起来好像修改了它的类. OO原则: 封装变化 多用组合,少用继承 针对接口编程,不针对实现编程 为交互对象之间的松耦合设计而努力 类应该对扩展开放, ...
- 2D游戏模型中动态分层的处理 及解决方案 (适用于 webgame 手游等资源控制较严格类型)
文章若非特别注明转载,皆是原创,转载请注明出处. 本文地址:http://www.cnblogs.com/bobolive/p/3537215.html 2D游戏中模型一般都有换装逻辑,特别是联网游戏 ...
- centos7下编译qt的mysql驱动
在编译mysql驱动之前,首先要安装mysql,可以使用yum安装,这里将不再介绍. 在将qt和mysql都安装好之后,首先找到mysql的头文件以及他的共享库,我的mysql是使用yum安装的,头文 ...
- Maya QT interfaces in a class
Most tutorials online have suggested the way to fire commands inside QT interfaces launched n Maya ( ...
- hdu 2844 poj 1742 Coins
hdu 2844 poj 1742 Coins 题目相同,但是时限不同,原本上面的多重背包我初始化为0,f[0] = 1;用位或进行优化,f[i]=1表示可以兑成i,0表示不能. 在poj上运行时间正 ...
- C#委托的语法
using System;using System.Collections.Generic;using System.Linq;using System.Text;using Delegate; na ...