<!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. Sublime Text2上搭建C/C++环境

    环境:Sublime Text2            win7 64位 1.下载Sublime Text2并安装     下载地址:http://www.sublimetext.com/ 2.需要用 ...

  2. Mysql主从配置+读写分离

    Mysql主从配置+读写分离     MySQL从5.5版本开始,通过./configure进行编译配置方式已经被取消,取而代之的是cmake工具.因此,我们首先要在系统中源码编译安装cmake工具. ...

  3. YYKit之YYModel

    原文:http://www.cnblogs.com/lujianwenance/p/5706548.html    本文主要是对YYModel文件结构的简单分析,能帮助你更快的熟悉和学习YYModel ...

  4. mac配置svn服务器

    1创建svn库:mudydeMacBook-Air:~ mudy$   svnadmin create /Users/mudy/svn   2进行配置,配置我们的svn a.将svnsever.con ...

  5. sql server 2008如何保存Emoji表情

    1.将就的方法已找到,在保存前,Emoji表情字符串进行utf-8编码,然后写入数据表的nvarchar(max)字段,取出时再进行解码即可. c#的写法如下: 写入数据表前编码: string sH ...

  6. ugui自制摇杆。

    珍爱生命,远离插件. 以上8个字,好好理解. 反正我是这么觉得. 我说的是unity,不是魔兽世界. 总有一天,我会一句一句写出属于自己的东西. 可以开始主题了.         如图所示,建立一个画 ...

  7. SharePoint Client Add Folder,file to Library

    public void UploadDocument(string siteURL, string documentListName, string documentListURL, string d ...

  8. HTML5 canvas绘制雪花飘落动画（需求分析、知识点、程序编写分布详解）

    看到网上很多展示html5雪花飞动的效果,确实非常引人入胜,我相信大家也跟我一样看着心动的同时,也很好奇,想研究下代码如何实现:虽然哦很多地方也能下载这些源码,不过也不知道别人制作此类动画时的思路及难 ...

  9. 【转】pybrain的使用——一个开源的python神经网络工具包

    原文地址   http://lavimo.blog.163.com/blog/static/2149411532013911115316263/ 昨天的主要活动内容是找一个神经网络的包....= =这 ...

  10. PHP程序员的技术成长规划（送给迷茫的你）

    按照了解的很多PHP/LNMP程序员的发展轨迹,结合个人经验体会,抽象出很多程序员对未来的迷漫,特别对技术学习的盲目和慌乱,简单梳理了这个每个阶段PHP程序员的技术要求,来帮助很多PHP程序做对照设定 ...