<!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. web开发常用图片格式

    web开发常用图片格式有:gif   jpg/jpeg    png gif:图片压缩率高,可以显示动画,但是只能显示256色,可能造成颜色丢失. jpg:图片压缩率高(有损压缩),可以用小文件来显示 ...

  2. IOS的segmentedControl(分段器控件)的一些常用属性

    #pragma mark - 创建不同的分段器 //初始化方法:传入的数组可以是字符串也可以是UIImage对象的图片数组 UISegmentedControl *mysegmented = [[UI ...

  3. 关于char 指针变量char *=p;这个语句的输出问题

    学习指针的时候我一直有个疑惑,请看下面的代码: #include <iostream> using std::cout; void main() { ; int *nPtr=&nu ...

  4. dorado基本事件样例

    var info = self.get("returnValue"); view.set("#labelProduct.text","产品:" ...

  5. Codevs 1218 疫情控制 2012年NOIP全国联赛提高组

    1218 疫情控制 2012年NOIP全国联赛提高组 时间限制: 2 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description H 国有 n 个城市,这 ...

  6. Python快速入门学习笔记（二）

    注:本学习笔记参考了廖雪峰老师的Python学习教程,教程地址为:http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb49318210 ...

  7. 【Linux工具】svn命令行使用实例

    引言 网上有这么多介绍 svn 使用的文章,为什么还要写?因为它们深入不浅出,平铺不分类,理论不实际,看完也记不住. 本文先介绍基本用法,后进行实例演练.不求大而全,只求熟练常用,自行用 svn he ...

  8. PH获取当前url路径及服务器路径汇总 (url 获取当前路径 服务器路径)

    以下是整理的一些, php中获取路径的小知识, 希望对你有所帮助! 1,$_SERVER["QUERY_STRING"] 说明:查询(query)的字符串 2,$_SERVER[& ...

  9. Date、String、Calendar类型之间的转化

    原文出处:http://fjfj910.iteye.com/blog/1202219 1.Calendar 转化 String  //获取当前时间的具体情况,如年,月,日,week,date,分,秒等 ...

  10. MySQL基础学习之开始

    学习MySQL数据库几个月了,从什么都不懂到现在这个地步,说实话感触很大,也感觉自己有许多不足之处.当接触MySQL的时候, 连创建一个数据表都想了很长的时间,不知道许多东西.幸亏我有一个好的老师,她 ...