登录
当前位置： 首页 > 工具软件 > ember-data-github > 使用案例 >

Ember.js demo8

太叔京
2023-12-01 
<!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: 0;
  width: 200px;
  top: 0;
  bottom: 0;
  border-top: 1px solid #888;
}

#detail {
  position: absolute;
  left: 200px;
  right: 0;
  top: 0;
  bottom: 0;
  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: 0;
  margin: 0;
}

#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: 0;
  right: 0;
  bottom: 43px;
  overflow: auto;
}

#controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  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: 0;
  padding: 0;
}

.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: 0;
  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();
  }
});

 

转载于:https://www.cnblogs.com/wangwenfei/p/emberjs_demo8.html

 类似资料：

相关阅读

相关文章

相关问答

快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.