<!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. ASP.NET Web API 使用记录

    WebAPI采用REST架构,用的是无状态的HTTP协议.Web Service则是SOAP协议,比较重量级. 推荐阅读:Difference between WCF and Web API and ...

  2. [.Net MVC] 使用SQL Server数据库代替LocalDb

    之前开发的时候一直用的VS2013,所以数据库也用的LocalDb,这给开发带来很大便利.不过由于开发后还要进行部署,就改用了SQL Server 2012,这里总结下过程. 基本环境:VS2013, ...

  3. Java实战之03Spring-05Spring中的事务控制（基于AOP）

    五.Spring中的事务控制(基于AOP) 1.Spring中事务有关的接口 1.1.明确: JavaEE体系进行分层开发,事务处理位于业务层,Spring提供了分层设计业务层的事务处理解决方案 1. ...

  4. （poj）3268 Silver Cow Party 最短路

    Description One cow ≤ N ≤ ) conveniently numbered ..N ≤ X ≤ N). A total of M ( ≤ M ≤ ,) unidirection ...

  5. poj 3565 uva 1411 Ants KM算法求最小权

    由于涉及到实数,一定,一定不能直接等于,一定,一定加一个误差<0.00001,坑死了…… 有两种事物,不难想到用二分图.这里涉及到一个有趣的问题,这个二分图的完美匹配的最小权值和就是答案.为啥呢 ...

  6. java.lang.StringBuffer源码分析

    StringBuffer是一个线程安全的可变序列的字符数组对象,它与StringBuilder一样,继承父类AbstractStringBuilder.在多线程环境中,当方法操作是必须被同步,Stri ...

  7. Linux 终端中常用的快捷键

    1. 移动光标快捷键 ctrl+f 向前移动一个字符 ctrl+b 向后移动一个字符 alt+f 向前移动一个单词 alt+b 向后移动一个单词 ctrl+a 移动到当前行首 ctrl+e 移动到当前 ...

  8. Windows 下Python操作MySQL

    1.环境要求(Win7 X64): python 2.7, MySQL-python-1.2.3.win-amd64-py2.7 :http://www.codegood.com/download/1 ...

  9. VS2010开发环境最佳字体及配色方法

    Fixedsys Excelsior 3.01 1. 首先下载字体:http://www.fixedsysexcelsior.com/   脚本之家字体下载 2. 安装字体:control panel ...

  10. 如何做到 jQuery-free？

    一.选取DOM元素 jQuery的核心是通过各种选择器,选中DOM元素,可以用querySelectorAll方法模拟这个功能. var $ = document.querySelectorAll.b ...