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则不相伯仲.本文 ...

随机推荐

python tab补全
一.python tab补全前提:tab补全先检查readline包是否安装,未安装通过yum安装即可 [root@CentOS_11 day01]# rpm -qa |grep readliner ...
zookeeper实现商品秒杀抢购
package com.test; import java.io.IOException; import java.util.List; import java.util.concurrent.Cyc ...
Mysql 的变量
变量 MySQL是一门编程语言.所以存在变量.流程控制.函数.存储过程.触发器 MySQL分系统变量,与自定义变量 MySQL的某些功能是通过系统变量来实现的.例如:autocommit 查看系统变量 ...
Java多线程间通信-解决安全问题、等待唤醒机制
/*1.增加一个知识点一个类怎么在所有的类中,让其它类来共同修改它的数据呢?可以用单例设计模式可以用静态可以在其它类中做一个构造函数,接受同一个对象,这样就可以实现对象 2.状态选择可以用数字0 1 ...
bash 脚本
一.英文版 1.Advanced Bash-Scripting Guide 二.中文 1.BashGuide for Beginners 中文版
访问图像中的像素［OpenCV 笔记16］
再更一发好久没更过的OpenCV,不过其实写到这个部分对计算机视觉算法有所了解的应该可以做到用什么查什么了,所以后面可能会更的慢一点吧,既然开了新坑,还是机器学习更有研究价值吧... 图像在内存中的存 ...
Skia
1 What is SKIA. Skia is an open source 2D graphics library which provides common APIs that work acro ...
Poj 1017 / OpenJudge 1017 Packets/装箱问题
1.链接地址: http://poj.org/problem?id=1017 http://bailian.openjudge.cn/practice/1017 2.题目: 总时间限制: 1000ms ...
用Objective-C的foundation框架解决表达式求值问题
主要思想: 本程序分2个类一个是ExpressionString类,主要用于存储表达式以及对它进行求值.以下是该类中的内容: (NSString *)expString//用于存储要计算的表达式: ...
PHOTOSHOP 制作虚线和实线
1.制作实线可以直接用直线工具,选择合适的粗细大小. 2. 制作虚线首先要用钢笔或者绘图工具画出所需要的形状,如弧线,圆形等等然后在路径面板中用画笔描边,画笔需要提前设置好粗细和间距,用方形 ...

Ember.js demo8

Ember.js demo8的更多相关文章

随机推荐

热门专题