<!DOCTYPE html>

<html>

<head>

<meta name="description" content="ED: Reading" />

  <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.4/handlebars.js"></script>

  <script src="http://builds.emberjs.com.s3.amazonaws.com/ember-1.0.0-rc.4.js"></script>

<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-data-0.13.js"></script>

<meta charset=utf-8 />

<title>JS Bin</title>

</head>

<body>

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

  <nav id="master">

    <header>

      All Contacts ({{controller.length}})

    </header>

    <ul>

      {{#each controller}}

      <li>

        {{#linkTo "contact" this}}

          {{first}} {{last}}

        {{/linkTo}}

      </li>

      {{/each}}

    </ul>

    <div id="controls">

      <button class="btn">+</button>

      <button class="btn pull-right">-</button>

    </div>

  </nav>

  <div id="detail">

    {{outlet}}

  </div>

  </script>

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

  <div class="welcome">

    <h2>Address Book</h2>

  </div>

  </script>

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

  <header class="contact-header">

    <div class="avatar">

      <img {{bindAttr src="avatar"}}>

    </div>

  </header>

  <dl class="contact-data">

    <dt><label for="contact-first">First Name</label></dt>

    <dd>{{input value=first id="contact-first"}}</dd>

    <dt><label for="contact-last">Last Name</label></dt>

    <dd>{{input value=last id="contact-last"}}</dd>

    <dt><label for="contact-avatar">Avatar URL</label></dt>

    <dd>{{input value=avatar id="contact-avatar"}}</dd>

    <dt><label for="contact-github">Github</label></dt>

    <dd>

      {{input value=github id="contact-github"}}

      {{#if github}}

      <br><a {{bindAttr href="github"}}>view ➚</a>

      {{/if}}

    </dd>

    <dt><label for="contact-twitter">Twitter</label></dt>

    <dd>

      {{input value=twitter id="contact-twitter"}}

      {{#if twitter}}

      <br><a {{bindAttr href="twitter"}}>view ➚</a>

      {{/if}}

    </dd>

    <dt><label for="contact-notes">Notes</label></dt>

    <dd>{{textarea value=notes id="contact-notes"}}</dd>

  </dl>

  </script>

</body>

</html>
/* @override http://localhost:8000/css/app.css */

/* @override http://localhost:8000/css/app.css */

body {

  font-family: sans-serif;

  background: #fff;

}

#master {

  position: absolute;

  left:;

  width: 200px;

  top:;

  bottom:;

  border-top: 1px solid #888;

}

#detail {

  position: absolute;

  left: 200px;

  right:;

  top:;

  bottom:;

  border-left: 1px solid #b4b4b4;

  border-top: 1px solid #888;

  overflow: auto;

}

.welcome {

  padding: 20px;

  text-align: center;

}

#master ul {

  list-style: none;

  padding-left:;

  margin:;

}

#master a {

  display: block;

  padding: 4px 8px;

  text-decoration: none;

  color: inherit;

  font-size: 14px;

  background: #fff;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

#master a:hover {

  background: #fcfcfc;

}

#master a.active {

  background: #3875d7;

  color: #fff;

}

#master li {

  border-bottom: 1px solid #e0e0e0;

}

#master header {

  font-size: 12px;

  text-align: center;

  padding: 2px;

  border-bottom: 1px solid #aaa;

  color: #666;

  background-color: #ffffff;

  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eeeeee));

  background-image: -webkit-linear-gradient(top, #ffffff, #eeeeee);

  background-image:    -moz-linear-gradient(top, #ffffff, #eeeeee);

  background-image:      -o-linear-gradient(top, #ffffff, #eeeeee);

  background-image:         linear-gradient(to bottom, #ffffff, #eeeeee);

}

#master ul {

  position: absolute;

  top: 19px;

  left:;

  right:;

  bottom: 43px;

  overflow: auto;

}

#controls {

  position: absolute;

  bottom:;

  left:;

  right:;

  padding: 4px;

  border-top: 1px solid #aaa;

  background-color: #ffffff;

  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eeeeee));

  background-image: -webkit-linear-gradient(top, #ffffff, #eeeeee);

  background-image:    -moz-linear-gradient(top, #ffffff, #eeeeee);

  background-image:      -o-linear-gradient(top, #ffffff, #eeeeee);

  background-image:         linear-gradient(to bottom, #ffffff, #eeeeee);

}

.contact-data dt,

.contact-header .avatar {

  width: 30%;

  text-align: right;

  color: #888;

}

.contact-data dt label {

  display: inline-block;

  padding: 4px;

}

.contact-data input[type=text],

.contact-data textarea {

  font-family: inherit;

  font-size: inherit;

  border: 1px solid transparent;

  padding: 2px;

  width: 80%;

  outline: none;

}

.contact-data input[type=text]:hover,

.contact-data textarea:hover {

  border-color: #ccc;

}

.contact-data input[type=text]:focus,

.contact-data textarea:focus {

  border-color: #9cbaeb;

}

.contact-data textarea {

  height: 150px;

  padding: 4px 2px;

}

.contact-data dd,

.contact-header h1 {

  width: 65%;

}

.contact-data dt,

.contact-data dd,

.contact-header h1,

.contact-header .avatar {

  display: inline-block;

  vertical-align: top;

  margin:;

  padding:;

}

.contact-header h1 {

  font-size: 18px;

}

.contact-header img {

  max-width: 64px;

  height: 64px;

}

.contact-header {

  margin-top: 55px;

}

.contact-data a {

  margin-left: 4px;

  color: #3875d7;

  text-decoration: none;

}

.contact-data a:hover {

  color: #d79d38;

}

.btn {

  display: inline-block;

  padding: 4px 10px 4px;

  font-size: 16px;

  line-height: 20px;

  color: #333333;

  text-align: center;

  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);

  vertical-align: middle;

  background-color: #f5f5f5;

  background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);

  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));

  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);

  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);

  background-image: linear-gradient(top, #ffffff, #e6e6e6);

  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);

  border: 1px solid #cccccc;

  border-color: #ccc #ccc #888;

  border-bottom-color: #b3b3b3;

  border-radius: 4px;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);

  background-repeat: repeat-x;

}

.btn:hover,

.btn:active,

.btn.active,

.btn.disabled,

.btn[disabled] {

  background-color: #e6e6e6;

  *background-color: #d9d9d9;

}

.btn:hover {

  color: #333333;

  text-decoration: none;

  background-color: #e6e6e6;

  *background-color: #d9d9d9;

  background-position: 0 -15px;

}

.btn.active,

.btn:active {

  background-color: #e6e6e6;

  background-image: none;

  outline:;

  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);

}

.btn.disabled,

.btn[disabled] {

  cursor: default;

  background-color: #e6e6e6;

  background-image: none;

  opacity: 0.65;

  box-shadow: none;

}

.pull-right {

  float: right;

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

App.Store = DS.Store.extend({

  revision: 12,

  adapter: DS.RESTAdapter.create({

    url: 'http://addressbook-api.herokuapp.com'

  })

});

App.Contact = DS.Model.extend({

  first: DS.attr('string'),

  last: DS.attr('string'),

  avatar: DS.attr('string'),

  github: DS.attr('string'),

  twitter: DS.attr('string'),

  notes: DS.attr('string')

});

App.Router.map(function() {

  this.resource('contact', {path: '/contact/:contact_id'});

});

App.ApplicationRoute = Ember.Route.extend({

  model: function() {

    return App.Contact.find();

  }

});

Ember.js demo8的更多相关文章

  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. ###《Effective STL》--Chapter3

    点击查看Evernote原文. #@author: gr #@date: 2014-09-13 #@email: forgerui@gmail.com Chapter3 关联容器 Topic 22: ...

  2. Objective-C 【继承、变量修饰符（私有变量/方法）、description方法】

    ------------------------------------------- 继承 一段代码: #import <Foundation/Foundation.h> @interf ...

  3. 面试题之redis实现限制1小时内每用户Id最多只能登录5次

    面试题之redis实现限制1小时内每用户Id最多只能登录5次 /// <summary> /// redis实现限制1小时内每用户Id最多只能登录5次 /// </summary&g ...

  4. jquery动态插入行

    这是一个利用jquery动态插入输入内容的代码. html代码: <div title="分表2" class="ui-edit" style=" ...

  5. MySQL企业常用集群图解

      mysql集群架构图片 1.mysql企业常用集群架构 在中小型互联网的企业中.mysql的集群一般就是上图的架构.WEB节点读取数据库的时候读取dbproxy服务器.dbproxy服务器通过对S ...

  6. 通过 ANE(Adobe Native Extension) 启动Andriod服务 推送消息(三)

    jar包完成后,剩下就是要构建ANE包来供实际程序调用. 首先要建两个Flex库项目, default那个是官方建议加上的,仅用于不在真实环境下编译调试的时候有个默认接口不至于调用不成功报错,项目结构 ...

  7. android驱动程序之 - sensor

    上图是android系统架构图,从中可以得知,sensor必贯穿架构的各个层次.按照架构层次,下面从五个方面来分析sensor架构: 1. sensor架构之App层: 2. sensor架构之Fra ...

  8. 栈（顺序存储）C++模板实现

    #include <iostream> using namespace std; template <typename T> class stack{ private: int ...

  9. 我忽略了的DOCTYPE！

    最近不知道是不是因为天气的原因,瞌睡太多了,而且每天晚上都做梦,更奇怪的是每次做梦都能够连着上次没有做完的梦继续做.第二天上班又没有精神,人都快崩溃了!不说了,郁闷! 偶然看到一个问题:Doctype ...

  10. POJ2255二叉树

    题目大意就是给出你一个二叉树的前序和中序,要你求后序. 思路:二叉树的排序就是根据根节点的位置来定义的.所以找到二叉树的根节点是最重要的,二叉树的左子树和右子树也可以看成是二叉树,以此递归: #inc ...