<!DOCTYPE html>

<html>

<head>

<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.2/ember.js"></script>

<meta charset=utf-8 />

<title>JS Bin</title>

</head>

<body>

<script type="text/x-handlebars">

<h1>Application</h1>

<ul>

  <li>{{#linkTo "about"}}About{{/linkTo}}</li>

  <li>{{#linkTo "login"}}Login{{/linkTo}}</li>

</ul>

{{outlet}}

</script>

<script type="text/x-handlebars" id="about">

<h2>About</h2>

<ul>

  <li>

    {{#linkTo "about.location"}}Location{{/linkTo}}

  </li>

  <li>

    {{#linkTo "about.product"}}Product{{/linkTo}}

  </li>

</ul>

{{outlet}}

</script>

<script type="text/x-handlebars" id="index">

<h2>Index</h2>

</script>

<script type="text/x-handlebars" id="login">

<h2>Login</h2>

</script>

<script type="text/x-handlebars" id="about/index">

<h3>Index</h3>

</script>

<script type="text/x-handlebars" id="about/location">

<h3>Location</h3>

</script>

<script type="text/x-handlebars" id="about/product">

<h3>Product</h3>

</script>

</body>

</html>
body {

  font-family: sans-serif;

  color: #454545;

}

a {

  color: blue;

}

a.active {

  color: red;

}
var App = Ember.Application.create();

App.Router.map(function() {

  this.resource('about', function() {

    this.route('product');

    this.route('location');

  });

  this.resource('login');

});

Ember.js demo7的更多相关文章

  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. 暑假集训(2)第五弹 ----- Who's in the Middle（poj2388)

    G - Who's in the Middle Crawling in process... Crawling failed Time Limit:1000MS     Memory Limit:32 ...

  2. vmware workstation下的虚拟Linux通过NAT模式共享上网

    在vmware workstation虚拟机下面,Linux虚机要上网,一般是桥接模式,但我自己的电脑上网的环境不同,也懒得去总是配置Linux的网卡信息,所以,设置为NAT模式来共享真机的上网网卡来 ...

  3. SQL技巧之分组求和

    这是CSDN问答里面有人提出的一道问题,题目如下. 表格如下: 得出结果如下: 求精简的SQL语句. SQL查询语句: with a as( select rank() over (partition ...

  4. java 子类的实例化和代码块初始化过程

    1,子类的实例化 1,子父类中的构造函数的特点. 在子类构造对象时,发现,访问子类构造函数时,父类也运行了. 为什么呢? 原因是:在子类的构造函数中第一行有一个默认的隐式语句. super(); 子类 ...

  5. 前端资源多个产品整站一键打包&包版本管理（三）—— gulp分流

    问题: 当我们一个工作台里面有好几个项目的时候,我们要为项目的前端资源进行打包,但是,gulpfile只有一个,如果我们把所有的打包都放在同一个文件里面,首先文件会越来越大,而且不便于管理,这时,我们 ...

  6. Jquery Offset, Document, Window 都是什么

    From http://www.cnblogs.com/luhe/archive/2012/11/14/2769263.html   JQuery Offset实验与应用 我们有时候需要实现这样一种功 ...

  7. PHP学习心得（六）——变量

    PHP 中的变量用一个美元符号后面跟变量名来表示.变量名是区分大小写的.一个有效的变量名由字母或者下划线开头,后面跟上任意数量的字母,数字,或者下划线.$this 是一个特殊的变量,它不能被赋值.PH ...

  8. PHP的PSR-0命名标准

    PSR是Proposing a Standards Recommendation(提出标准建议)的缩写,是由PHP Framework Interoperability Group(PHP通用性框架小 ...

  9. c#画正弦波

    /// <summary> /// 画正弦曲线 /// </summary> /// <param name="sender"></par ...

  10. 第四章 Web表单

    4.1 跨站请求伪造保护 安装flask-wtf app = Flask(__name__) app.config['SECRET_KEY'] = 'hard to guess string' 密钥不 ...