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则不相伯仲.本文 ...
随机推荐
- SAX方式解析XML文件实例
books.XML文件: 书籍book.java实体类: public class Book { private String id; private String name; private Str ...
- 规则引擎ILog和CKRule的对比
IBM™ WebSphere™ ILOG是业界最有影响力的业务规则商业软件,它提供了最好的业务规则管理系统,在Java领域更是有广泛的成功案例.网上关于ILOG的技术资料非常多,大家都比较了解ILOG ...
- C#与C++相比较之STL篇(续一)
本篇接<C#与C++相比较之STL篇>,主要探索C++STL的两个组件:算法和仿函数,以及C#的linq和拉姆达表达式.委托. STL的算法与仿函数 算法是个庞大的主题,STL包含了超过1 ...
- vc实现ping
//ping.h #ifndef _CPING_H_ #define _CPING_H_ #include <Winsock2.h> #include <Windows.h> ...
- VC6.0生成的exe文件图标
以下是我网上收到的方法 我都试过 成功不了 具体说下我遇到的问题 VC6.0生成的exe文件图标是用Icon下几个图标中value值最小的,顺序为IDR_MAINFRAME.IDR_ICONTETYP ...
- 2014年度辛星html教程夏季版第六节
不知道这样大家会不会感觉枯燥,总之不管大家怎么样,辛星始终会陪伴大家的,期待您的关注和支持,也衷心的希望我的博客能让您少走弯路,获得更系统的知识. ***************表格********* ...
- stm32类型cl、vl、xl、ld、md、hd的含义
- startup_stm32f10x_ld_vl.s: for STM32 Low density Value line devices - startup_stm32f10x_ld.s: for ...
- 闲谈前端编码解码、C#编码解码。
最近做项目,出现中文乱码的问题,特地研究一下. GB2312,指的是中文 UTF8,指的是国标,包含中文.英文. 但是通过JQuery.ajax的Get.Post,如果直接传递中文或者特殊字符的特使字 ...
- Git权威指南 读笔(1)
第四章 Git初始化: 设置Git当前用户和邮件地址: $ git config --global user.name $ git config --global user.email 设置Git命令 ...
- 洛谷 P1052 过河
题目描述 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石子上.由于桥的长度和青蛙一次跳过的距离都是正整数,我们可以把独木桥上青蛙可能到达的点看成数 ...