<!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的更多相关文章

  1. 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 的目的是 ...

  2. 【前端】Ember.js学习笔记

    Model 在默认情况下,model钩子返回的值,会设置为关联的控制器的model属性.例如,如果App.PostsRoute通过model钩子返回了一个对象,这个对象会设置为App.PostsCon ...

  3. Ember.js 的视图层

    本指导会详尽阐述 Ember.js 视图层的细节.为想成为熟练 Ember 开发者准备,且包 含了对于入门 Ember 不必要的细节. Ember.js 有一套复杂的用于创建.管理并渲染连接到浏览器 ...

  4. Ember.js入门教程、博文汇总

    第一章 对象模型 Ember.js 入门指南——类的定义.初始化.继承 Ember.js 入门指南——类的扩展(reopen) Ember.js 入门指南——计算属性(compute properti ...

  5. 点燃圣火！ Ember.js 的初学者指南

    现在,到处都可以看到复杂的 JavaScript 应用程序. 由于这些应用程序变得越来越复杂,一长串的 jQuery 回调语句,或者通过应用程序在各个点执行不同的函数调用,这些都变得无法再让人接受. ...

  6. Ember.js之动态创建模型

    本人原文地址发布在:点击这里 What problem did we meet? As ember document suggestion, we may define a model as a st ...

  7. Ember.js实现单页面应用程序

    1.1.1 摘要 单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序. SPA使用AJAX和HTML5创建流畅且响应迅速的Web应用程序,不会经常 ...

  8. Ember.js系列文章

    JS前端框架之Ember.js系列文章 本文为文章索引,主要是罗列Ember.js的相关文章便于阅读. 相关演示代码:github for free. 基础篇 1. EmberJs之What|Why| ...

  9. 【JavaScript】前端开发框架三剑客—AngularJS VS. Backone.js VS.Ember.js

    摘要:透过对Github,StackOverflow,YouTube等社区进行数据收集后可知,AngularJS在各大主流社区中都是最受欢迎的,Backbone.js与Ember.js则不相伯仲.本文 ...

随机推荐

  1. wpf打印控件 实现分页打印控件功能

    因为 要实现打印 wpf  listbox控件  数据特别多 要打印在 几张纸上    找了几天 都没有找到相关的例子 现在 解决了 在这里和大家分享一下 public void print(Fram ...

  2. 处理不等高TableViewCell

    课题一:如何计算Cell高度 方案一:直接法(面向对象) 想知道妹纸爱你有多深?直接去问妹纸本人吧! 嗯!Cell也是一样的,想知道cell到底有多高?直接问Cell本人就好了.直接法,就是把数据布局 ...

  3. 关于XML与类型Class的映射

    我们知道数据的持久化是编程必须面对的问题.我们可以保存数据到数据库.Excel表.XML文件.TXT文件等等.那么我们编程中经常会遇到对Xml文件的操作.在http://www.cnblogs.com ...

  4. 利用 css 制作简单的提示框

    在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和abs ...

  5. 17_高级映射：一对一查询（使用resultType）

    [数据库模型] [各个表] [ 用户表user ] 购买商品的用户信息. [ 订单表 ] 用户所创建的订单 [ 订单明细表 ] 订单的详细信息,即购买商品的信息 [ 商品表 ] 商品的具体信息 [有关 ...

  6. attempt to write a readonly database 的解决办法

    这个问题导致我的unity项目崩溃,以至于无法打开. 第一次出现这个问题是因为在Lighting窗口中build按钮下点击了clear all baked datas,导致unity强制退出,并给出上 ...

  7. grant授权“失败”的原因

    在创建用户的时候我们通常采用grant命令完成,并同时赋予相应的权限,例如我们创建一个名为test的用户,g并赋予其对数据库foo下所有表格select,delete,drop,create权限: g ...

  8. 把URL传递参数转变成自定义实体方法

    先定义下要获取的实体: public class InputClass { public long Id { get; set; } public int Status { get; set; } p ...

  9. Django部署问题

    1.Debug=True页面正常显示. 2.Debug=False,页面500错误. 3.解决500,配置setting.py,令ALLOWED_HOSTS = ['*'],可解决访问问题,但静态文件 ...

  10. A Case for Flash Memory SSD in Enterprise Database Applications

    通过分析固态硬盘的特性对数据库中不同对象,如:表,索引,回滚段,重做日志等的应用进行具体研究,最后将数据库中不同的对象进行区别应用