<!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">

          <li><a href="#" {{action createUser}}>+ New User</a></li>

          {{#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;

  },

  events: {

    createUser: function() {

      var users = this.modelFor('application');

      var user = users.pushObject({

        id: users.length

      });

      this.transitionTo('editUser', user);

    }

  }

});

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

  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. 修改arcgis server默认js和css连接地址

    当使用ArcGIS Server 10.1发布了一个地图服务之后,在ArcGIS Server 10.1的机器上使用浏览器进入http://localhost:6080/arcgis/rest/ser ...

  2. oracle数据同步方案

    数据同步方案:--用DBLINK 创建与所需同步表的链接------------------------------------------------------------------------ ...

  3. union 和 union all 的区别

    Union因为要进行重复值扫描,所以效率低.如果合并没有刻意要删除重复行,那么就使用Union All  两个要联合的SQL语句 字段个数必须一样,而且字段类型要“相容”(一致): 如果我们需要将两个 ...

  4. 虚拟光驱 DAEMON Tools Lite ——安装与入门

    DAEMON Tools Lite 是什么?它不仅仅是虚拟光驱.是的,你可以使用它制作.加载光盘映像,但是 DAEMON Tools 产品那么多,Lite版与其他版本究竟有什么不同呢?或者说,是什么让 ...

  5. C++里的int 和string类型相互转换

    C++不像Java和C#一样在进行数据类型转换时直接调用一些类方法就可以了,使用起来很简单. 一个很简单的例子就是string str=“D:\\”+1+“.txt”;这在Java或者C#里面是可以自 ...

  6. 九度OJ 1120 全排列 -- 实现C++STL中next_permutation()

    题目地址:http://ac.jobdu.com/problem.php?pid=1120 题目描述: 给定一个由不同的小写字母组成的字符串,输出这个字符串的所有全排列. 我们假设对于小写字母有'a' ...

  7. 模板：使用new delete 创建二维数组

    int **arr_matrix = new int*[n]; ; i < n; ++i) arr_matrix[i] = new int[n]; //内容 ; i < n; ++i) d ...

  8. OpenJudge 2756 二叉树

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

  9. file_put_contents() 图片保存 函数成功之后返回值

    今天弄图片保存时,用到file_put_contents()来保存图片,运行了几次,发下一直没有数据出来,以为是这个函数没操作成功 于是查看了下这个函数的用法和返回值,发现我输出的返回都正确,后来才发 ...

  10. PHP 透明水印生成代码

    PHP 透明水印生成代码,需要的朋友可以参考下. 复制代码代码如下: <?php  /*  * Created on 2010-10-27  * BY QQ542900563  * Copyri ...