<!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. 对象创建型模式------Builder(生成器或建造者模式）(2)

    链接转自:http://blog.csdn.net/wuzhekai1985/article/details/6667467 主要思想是:首先有个指挥家思想者将大体的设计思路设计出来,然后寻找一部分工 ...

  2. swift-计算器（斯坦福公开课）

    看了斯坦福老头的课,真心觉得,我的中文怎么也变的这么垃圾了.是关于iOS8的课程,用swift写的,一个计算器应用的制作,看看人家的课,再看看咱们学校的课(不过垃圾学校,纯粹觉得大学浪费了),废话啊, ...

  3. windows2003可用gt630显卡驱动

    http://file2.mydrivers.com/display/301.42-desktop-winxp-32-international-whql.exe 驱动精灵自动下载的不好用,这个版本可 ...

  4. OpenJudge 2756 二叉树

    1.链接地址: http://bailian.openjudge.cn/practice/2756/ 2.题目: 总时间限制: 1000ms 内存限制: 65536kB 描述 如 上图所示,由正整数1 ...

  5. java File详解

    一.简介 File类是“文件”和“目录名”的抽象表示形式.因此在java语言中,File类既可以表示文件也可以表示目录. 尽管java.io定义的大多数类是实行流式操作的,而File类则不是,它没有指 ...

  6. windows phone 操作 http异步返回结果

    wp中为了提升用户体验,砍掉了http的同步操作,仅支持http异步请求,那么该如何及时处理异步操作返回的结果.纠结了很久,终于在技术群中好友的帮助下解决了问题,借助事件,将异步编程模型模式简单的处理 ...

  7. PHP 各种函数

    usleep() 函数延迟代码执行若干微秒. unpack() 函数从二进制字符串对数据进行解包. uniqid() 函数基于以微秒计的当前时间,生成一个唯一的 ID. time_sleep_unti ...

  8. 会话控制：cookie和session基础学习笔记

    在多次HTTP连接间维护用户与同一用户发出的不同请求之间关联的情况称为维护一个会话(session) 我们可以简单理解为浏览器的开关. 其实对cookie和session也是主要为curd操作 coo ...

  9. 安装IntelliJ IDEA热部署tomcat插件JreBel

    最近试着使用IntelliJ IDEA这款IDE,网上说它是最好用的java开发工具~但奈何国内ecilpse市场占有率实在稳固,所以国内这个工具也就少数人在使用 当然使用起来跟ecilpse还是有很 ...

  10. 《C和指针》读书笔记——第一章 快速上手

    1.注释代码可以用: #if 0 statements #endif 2.参数被声明为const,表明函数将不会修改函数调用者的所传递的这个参数. 3.scanf("%d",&am ...