<!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. .Net获取iis版本

    有以下办法获取iis版本. DirectoryEntry getEntity = new DirectoryEntry("IIS://localhost/W3SVC/INFO"); ...

  2. Sencha Touch id 和 itemId

    通过id获得组件: var view=Ext.getCmp('id'); 通过itemId获得组件: var view = ComponentQuery.query('view_xtype'), // ...

  3. android 登陆案例_最终版本 sharedpreference

    xml  与之前的登陆案例相同 java代码: package com.itheima.login; import java.util.Map; import com.itheima.login.ut ...

  4. mysql innodb 数据打捞（一）innodb 页面结构特征

    如果文件系统损坏或意外删除了数据库文件,只要磁盘空间没有被覆盖,其实数据都还在磁盘的扇区中,还是可以恢复出来的,有些通用的文件恢复工具好象也可以恢复文件 ,但这里要研究的是在通用文件 恢复工具失效的时 ...

  5. Android NDK 环境搭建 + 测试例程

    懒得废话一大堆概念,关于ADT.NDK的概念要是你不懂,怎么会搜到这里来?所以你只需要根据下面的步骤来,就可以完成NDK环境搭建了. 步骤:(假设你未安装任何相关开发工具,如果已经安装了,就可以跳过) ...

  6. mysql cluster 安装配置方案

    mysql cluster (mysql 集群)安装配置方案   一.准备 1.准备服务器 计划建立有5个节点的MySQL CLuster体系,需要用到5台服务器,但是我们做实验时没有这么多机器,可以 ...

  7. Django部署问题

    1.Debug=True页面正常显示. 2.Debug=False,页面500错误. 3.解决500,配置setting.py,令ALLOWED_HOSTS = ['*'],可解决访问问题,但静态文件 ...

  8. Node安装与环境配置

    1.nodejs(npm)安装 下载nodejs(http://nodejs.cn/)安装后,cmd下如输入 node -v  与  npm -v 出现下图版本提示就是完成了NodeJS的安装 2.n ...

  9. CSS3 animation-fill-mode 属性

    现在专注于移动端开发项目,对于动画这个点是非常重要的,每当我遇到一个新的知识点,我就会和大家一起分享 animation-fill-mode :把物体动画地从一个地方移动到另一个地方,并让它停留在那里 ...

  10. PHP生成订单号(产品号+年的后2位+月+日+订单号)

    require '../common.inc.php'; /* * 产品号+年的后2位+月+日+订单数 * @param [Int] $prodcutId 产品号 * @param [Int] $tr ...