Ember.js demo8
<!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的更多相关文章
- 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 的目的是 ...
- 【前端】Ember.js学习笔记
Model 在默认情况下,model钩子返回的值,会设置为关联的控制器的model属性.例如,如果App.PostsRoute通过model钩子返回了一个对象,这个对象会设置为App.PostsCon ...
- Ember.js 的视图层
本指导会详尽阐述 Ember.js 视图层的细节.为想成为熟练 Ember 开发者准备,且包 含了对于入门 Ember 不必要的细节. Ember.js 有一套复杂的用于创建.管理并渲染连接到浏览器 ...
- Ember.js入门教程、博文汇总
第一章 对象模型 Ember.js 入门指南——类的定义.初始化.继承 Ember.js 入门指南——类的扩展(reopen) Ember.js 入门指南——计算属性(compute properti ...
- 点燃圣火！ Ember.js 的初学者指南
现在,到处都可以看到复杂的 JavaScript 应用程序. 由于这些应用程序变得越来越复杂,一长串的 jQuery 回调语句,或者通过应用程序在各个点执行不同的函数调用,这些都变得无法再让人接受. ...
- Ember.js之动态创建模型
本人原文地址发布在:点击这里 What problem did we meet? As ember document suggestion, we may define a model as a st ...
- Ember.js实现单页面应用程序
1.1.1 摘要 单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序. SPA使用AJAX和HTML5创建流畅且响应迅速的Web应用程序,不会经常 ...
- Ember.js系列文章
JS前端框架之Ember.js系列文章 本文为文章索引,主要是罗列Ember.js的相关文章便于阅读. 相关演示代码:github for free. 基础篇 1. EmberJs之What|Why| ...
- 【JavaScript】前端开发框架三剑客—AngularJS VS. Backone.js VS.Ember.js
摘要:透过对Github,StackOverflow,YouTube等社区进行数据收集后可知,AngularJS在各大主流社区中都是最受欢迎的,Backbone.js与Ember.js则不相伯仲.本文 ...
随机推荐
- 常用经典SQL语句大全(提升)
二.提升 1.说明:复制表(只复制结构,源表名:a 新表名:b) (Access可用) 法一:select * into b from a where 1<>1(仅用于SQlServer) ...
- Google 常用镜像收集
1`下面列出几个目前常用的 公共DNS 服务器地址: 名称 DNS 服务器 IP 地址 OpenerDNS 42.120.21.30 百度 DuDNS 180.76.76.76 阿里 AliD ...
- 解决VS2012【加载......符号缓慢】的问题
http://blog.csdn.net/shi0090/article/details/19411777 最近在用VS2012调试时,经常出现"加载......符号缓慢的问题", ...
- oracle创建存储过程并返回结果集(附C#调用代码)
使用存储过程中,最常用的莫过于查询数据表,并返回结果集. 在SQL SERVER 中,这类操作最简单,通过简单的select * from xx 即可完成.但是在Oracle中并不支持这种写法,那么我 ...
- wait(...) notify() notifyAll()
简介 wait.notify.notifyAll是Java中3个与线程有关的方法,它们都是Object类中的方法. 其中,wait方法有3个重载形式: 1.wait() 2.wait(long tim ...
- STL简介
由于不同书籍和翻译问题对STL中的术语可能有差别本文采用侯杰<STL源码剖析>中的术语 STL的组件 包含6个组件,分别为容器.算法.迭代器.仿函数(函数对象).配接器(适配器).配置器( ...
- TreeMap 红黑树实现
TreeMap 是一个有序的key-value集合,它是通过 红黑树 实现的. TreeMap 继承于AbstractMap,所以它是一个Map,即一个key-value集合. TreeMap 实现了 ...
- <<深入Java虚拟机>>-第三章-垃圾收集器与内存分配策略-学习笔记
垃圾收集 垃圾收集(Garbage Collection,GC),垃圾收集需要完成的三件事情. 哪些对象需要回收 什么时候回收 如何回收 如何确定对象已死(即不可能在被任何途径引用的对象) 引用计数算 ...
- Openstack 目录
[一] OpenStack 基础环境 [二] OpenStack 认证服务 KeyStone [三] OpenStack 镜像服务 Glance [四] OpenStack 计算服务 Nova [五] ...
- Java 使用反射拷贝对象一般字段值
在<Java解惑>上面看到第八十三例--诵读困难者,要求使用非反射实现单例对象的拷贝.查阅了部分资料,先实现通过反射拷贝对象. 1. 编写需要被拷贝的对象Person package co ...