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则不相伯仲.本文 ...
随机推荐
- php正则贪婪匹配与非贪婪匹配一些例子
http://www.111cn.net/phper/210/55600.htm 贪婪模式匹配的原则是: 在可匹配也可不匹配的情况下, 优先匹配,直到不能匹配成功的情况下,记录备选状态,并把匹配控制交 ...
- TCP/IP 学习博客
原作者地址:http://blog.csdn.net/goodboy1881/article/category/204448
- SimpleDateFormat 的性能和线程安全性
系统正常运行一段时间后,QA报给我一个异常: java.lang.OutOfMemoryError: GC overhead limit exceeded at java.text.DecimalFo ...
- iOS 安全：UIWebView访问Https站点防止中间人攻击
尽管Https协议能够提供数据的加密.身份的认证等安全服务,但并不是没有漏洞.HTTPS协议安全隐患的存在可能使用户受到各种极具破坏力的网络攻击.其中中间人攻击(Man In The Middle, ...
- C++对象模型与内存位对齐的简单分析（GNU GCC&VS2015编译器）
以Fruit和Apple为例进行分析: Fruit和Apple的定义如下: 通过在两种编译环境下的测试(GNU GCC & VS2015),可以发现这两种编译器的对象模型是一样的,如下图所示: ...
- MailOtto 实现完美预加载以及源码解读
背景: 最近项目组需要一个小课题分享,小白刚好从微博里看到一个这样有趣的开源工具MailOtto,是阿里巴巴员工 Drakeet 维护的一个专注懒事件的事件总线,gitHub地址为:https://g ...
- hdu 5000 Clone
dp,用dp[i][j],表示和为i的前j个维度的种类.其中arr[i],表示第i维的最大值. 则\begin{equation} dp[i][j] = \sum_{0 \leq k \leq \mi ...
- http数据包解析碰到gzip压缩格式的解压
其中在做http数据包临控时碰到gzip压缩格式,在网友发布的一些技术文章基础上,经过一段时间的研究.调试,终于解析成功.现将核心代码公布于此,希望能够和大家一起共同学习交流.注:以下代码需要依赖zl ...
- 关于css中overflow:hidden的使用
overflow:hidden有两个用处经常用到: 1.通过设定自身的高度,加上overflow:hidden可以隐藏超过容器本身的内容: 但是,小编在以往的使用中,发现了一个问题,只要父级容 ...
- Sql语句批量更新数据(多表关联)
最近在项目中遇到一个问题,原来设计的功能是不需要一个特定的字段值depid的,但是新的功能需要根据depid来展现,于是出现了这样一个问题,新增加的数据都有正确的depid,而原来的大量的数据就没有d ...