<!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. xmlDoc.SelectNodes用法（获取不到节点时注意事项）

    注:以下举例仅针对xml自定义了命名空间的情况,如果是其他情况,请参照他人博客~ using System;using System.Collections.Generic;using System. ...

  2. CS0016: 未能写入输出文件“c:\windows\Microsoft.NET\Framework\v2.0.50727\Temporary ASP.NET Files\data\34aae060\b7daa87d\App_Web_addadvice.aspx.cdcab7d2.ekhlcbjd.dll”--“目录名无效。 ”

    产生原因: 应用程序运行时产生的临时文件需要存放到c:"windows"temp 文件夹下 而运行基于microsoft .net framework 框架下的应用程序 需要对te ...

  3. MS SQLService中的*= 及 =*

    今天看到数据库中的存储过程中,有*= ,于是百度了一下,原来这个SQL2000以前的左连接,以后的版本中开启兼容也是可以用的. 于是拿出来在系统中的表中测试了一下果然如此 例: 有用户表D_user及 ...

  4. 微软阵营企稳的利好消息：.NET开源、Visual Studio免费

    今天各个IT社区,头版头条说的是微软.NET开源了.宇宙中最好的IED–Visual Studio Community 2013将免费提供给用户的消息. <宇宙中最强大的开发环境免费了!> ...

  5. Unity中使物体自动寻路的方法

    在做一个FPS游戏时,需要敌方自动找到玩家方位并向玩家移动,在查找资料(并走了不少坑)后,我试了三个方法,经测试,这三个方法都能实现自动寻路功能. 方法一:使用Mathf.Lerp()方法 代码很简单 ...

  6. Boot Petalinux Project Using a remote system

    通过jtag实现在远程服务器端下载petalinux image到连接在本地PC的开发板上的方法. 具体连接方式为 比如Host的系统为Windows,Remote system为运载在远程服务器上的 ...

  7. Apache服务

    Apache服务的安装: Apache服务程序的软件包名称是:httpd 安装方法: rpm软件包安装.源码编译安装.yum安装 yum install httpd 安装完成后启动: revice h ...

  8. Qt-获取主机网络信息之QHostAddress

    QHostAddress类提供一个IP地址. 这个类提供一种独立于平台和协议的方式来保存IPv4和IPv6地址. QHostAddress通常与QTcpSocket,QTcpServer,QUdpSo ...

  9. （转）互联网协议入门 ------ HTTP（1）

    作者:阮一峰 原文:http://www.ruanyifeng.com/blog/2012/06/internet_protocol_suite_part_ii.html 我们每天使用互联网,你是否想 ...

  10. jquery中邮箱地址 URL网站地址正则验证实例代码

    QQ网站有一个网站举报的功能,看了一些js代码觉得写得很不错,我就拿下来了,下面是一个email验证与url网址验证js代码,分享给大家 email地址验证 复制代码代码如下: function ch ...