<!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="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.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 003</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>

  </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'});

});

App.UserRoute = Ember.Route.extend({

  model: function(params) {

    return users[params.user_id];

  }

});

App.ApplicationRoute = Ember.Route.extend({

  model: function() {

    return users;

  }

});

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

  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. vim自动补全：go

    1 环境配置 export GOPATH=/home/go 2 在新建GOPATH下新建三个目录 mkdir src pkg bin src 存放源码pkg 存放编译生成的文件bin 存放生成的可执行 ...

  2. [记录 ]升级IOS 9 和 XCode 7 引起的问题

    问题一: 升级xcode 7最低的系统配置要求 升级了ios9 后使用 xcode 6.1 已经不能用了,必须升级 xcode 7才行,原先的系统是OSX 10.10.1 版本.而xcode 7.0 ...

  3. OC3_字典

    // // main.m // OC3_字典 // // Created by zhangxueming on 15/6/12. // Copyright (c) 2015年 zhangxueming ...

  4. nodejs学习[持续更新]

    1.退出node process.exit(0) 2.把API从上往下全部看一遍,先混个眼熟. 3. end

  5. LeetCode FindMinimuminRotatedSorteArray &&FindMinimuminRotatedSorteArray2

    LeetCode上这两道题主要是使用二分搜索解决,是二分搜索算法的一个应用,根据条件每次舍弃一半,保留一半. 首先第一题: FindMinimuminRotatedSorteArray(时间复杂度为二 ...

  6. memcached全面剖析--5

    memcached的应用和兼容程序 mixi案例研究 mixi在提供服务的初期阶段就使用了memcached. 随着网站访问量的急剧增加,单纯为数据库添加slave已无法满足需要,因此引入了memca ...

  7. Nginx禁止通过IP,未绑定域名访问服务器

    这几天查看CNZZ统计后台看到,我的IP被两个未知的域名绑定了,为了避免被天朝和谐掉, 可以在Nginx上设置禁止通过IP访问服务器,只能通过绑定域名访问(同时设置未绑定域名返回500错误或者跳转到我 ...

  8. 软件测试 -- 测试人员和QA的区别

    软件测试人员的职责是尽可能早的找出软件缺陷,确保得以修复. 而质量保证人员(QA)主要职责是创建或者制定标准和方法,提高促进软件开发能力和减少软件缺陷. 测试人员的主要工作是测试,质量保证人员日常工作 ...

  9. 一步步学习ASP.NET MVC3 (11)——@Ajax,JavaScriptResult(2)

    请注明转载地址:http://www.cnblogs.com/arhat 今天在补一章吧,由于明天的事可能比较多,老魏可能顾不上了,所以今天就再加把劲在写一章吧.否则对不起大家了,大家看的比较快,可是 ...

  10. Appdelegate 导航操作

    隐藏返回按钮 self.navigationItem.hidesBackButton = YES; 设置导航的透明度 self.navigationController.navigationBar.t ...