zoukankan html css js c++ java

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

查看全文

相关阅读:
Hibernate关系映射（一）基于外键的单向一对一
 Hibernate开发环境搭建
 Java创建和读取Json
Json 简易教程
 jQuery Validate验证框架详解
 asp.net Core 3.1配置log4net
HTTP 错误 500.21
SQL中数据库无法访问，并且数据库的属性中使用人数、大小、可用空间全是不可用
 What is a CGFloat?
Swift中的CGPoint ，CGSize 、CGRect、CGFloat

原文地址：https://www.cnblogs.com/wangwenfei/p/emberjs_demo8.html