<!DOCTYPE html>

<html>

<head>

<script src="http://code.jquery.com/jquery.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>

  <script src="//ryanflorence.com/ember.min.js"></script>

<meta charset=utf-8 />

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">

<title>JS Bin</title>

</head>

<body>

  <script type="text/x-handlebars">

    <ul class="nav well">

      {{#each model}}

        {{render "user" this}}

      {{/each}}

    </ul>

  </script>

  <script type="text/x-handlebars" id="user">

  <li>

    <p>

      <img {{bindAttr src="avatar"}}>

      <b>{{first}} {{last}}</b>

    </p>

  </li>

  </script>

</body>

</html>
var App = Ember.Application.create();

App.ApplicationRoute = Ember.Route.extend({

  model: function() {

    return users;

  }

});

var users = [

  {

    id: 1,

    first: 'Ryan',

    last: 'Florence',

    avatar: 'https://si0.twimg.com/profile_images/3123276865/5c069e64eb7f8e971d36a4540ed7cab2.jpeg'

  },

  {

    id: 2,

    first: 'Tom',

    last: 'Dale',

    avatar: 'https://si0.twimg.com/profile_images/1317834118/avatar.png'

  },

  {

    id: 3,

    first: 'Yehuda',

    last: 'Katz',

    avatar: 'https://si0.twimg.com/profile_images/3250074047/46d910af94e25187832cb4a3bc84b2b5.jpeg'

  }

];
img {

  width: 50px;

  margin-right: 10px;

}

Ember.js demo3的更多相关文章

  1. 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 的目的是 ...

  2. 【前端】Ember.js学习笔记

    Model 在默认情况下,model钩子返回的值,会设置为关联的控制器的model属性.例如,如果App.PostsRoute通过model钩子返回了一个对象,这个对象会设置为App.PostsCon ...

  3. Ember.js 的视图层

    本指导会详尽阐述 Ember.js 视图层的细节.为想成为熟练 Ember 开发者准备,且包 含了对于入门 Ember 不必要的细节. Ember.js 有一套复杂的用于创建.管理并渲染连接到浏览器 ...

  4. Ember.js入门教程、博文汇总

    第一章 对象模型 Ember.js 入门指南——类的定义.初始化.继承 Ember.js 入门指南——类的扩展(reopen) Ember.js 入门指南——计算属性(compute properti ...

  5. 点燃圣火！ Ember.js 的初学者指南

    现在,到处都可以看到复杂的 JavaScript 应用程序. 由于这些应用程序变得越来越复杂,一长串的 jQuery 回调语句,或者通过应用程序在各个点执行不同的函数调用,这些都变得无法再让人接受. ...

  6. Ember.js之动态创建模型

    本人原文地址发布在:点击这里 What problem did we meet? As ember document suggestion, we may define a model as a st ...

  7. Ember.js实现单页面应用程序

    1.1.1 摘要 单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序. SPA使用AJAX和HTML5创建流畅且响应迅速的Web应用程序,不会经常 ...

  8. Ember.js系列文章

    JS前端框架之Ember.js系列文章 本文为文章索引,主要是罗列Ember.js的相关文章便于阅读. 相关演示代码:github for free. 基础篇 1. EmberJs之What|Why| ...

  9. 【JavaScript】前端开发框架三剑客—AngularJS VS. Backone.js VS.Ember.js

    摘要:透过对Github,StackOverflow,YouTube等社区进行数据收集后可知,AngularJS在各大主流社区中都是最受欢迎的,Backbone.js与Ember.js则不相伯仲.本文 ...

随机推荐

  1. Ext.Net学习笔记20：Ext.Net FormPanel 复杂用法

    Ext.Net学习笔记20:Ext.Net FormPanel 复杂用法 在上一篇笔记中我们介绍了Ext.Net的简单用法,并创建了一个简单的登录表单.今天我们将看一下如何更好是使用FormPanel ...

  2. 第三篇、FMDB使用

    简介: FMDB是基于SQlite3的封装一个第三方的OC库,操作起来更加简单,性能比Coredata更加高. 1.创建sqlite文件 2.导入FMDB头文件 3.创建数据库表table 4.编写s ...

  3. 【html】【19】高级篇--大事件时间轴

    下载: http://sc.chinaz.com/jiaoben/131112181390.htm 其它: http://sc.chinaz.com/tag_jiaoben/shijianzhou.h ...

  4. 【开发】Form Validate 表单验证 扩展应用

    目录: ★.文本输入框(easyui-textbox) ★.数字框(easyui-numberbox) ★.时间(easyui-datebox) ★.文本域(easyui-textbox easyui ...

  5. 帝国CMS附件大小限制

    做文件的上传下载,在我们本地测试总是顺利通过,一上传到服务器各种问题都来了. 帝国CMS,我们先看网站配制中附件大小限制. 附件存放目录设置: 单击菜单“系统”>“系统设置”>“系统参数设 ...

  6. 层叠上下文 Stacking Context

    层叠上下文 Stacking Context 在CSS2.1规范中,每个盒模型的位置是三维的,分别是平面画布上的x轴,y轴以及表示层叠的z轴.对于每个html元素,都可以通过设置z-index属性来设 ...

  7. oninput和onpropertychange

    时常会有监听输入框输入的场景,比如新浪微博的发微博输入框: 还有边输入边提示: 以及form表单边输入边验证,当内容为空提示或者改变输入框的样式达到提示效果. 在IE中是onpropertychang ...

  8. 2016ACM竞赛训练暑期课期末考试 a题

    描述 给出n个正整数,任取两个数分别作为分子和分母组成最简真分数,编程求共有几个这样的组合. 输入 第一行是一个正整数n(n<=600).第二行是n个不同的整数,相邻两个整数之间用单个空格隔开. ...

  9. leetcode problem 41 -- First Missing Positive

    Given an unsorted integer array, find the first missing positive integer. For example,Given [1,2,0]  ...

  10. linux (centos 6.4)安装自定义分区方案（转载）

    在计算机上安装 Linux 系统,对硬盘进行分区是一个非常重要的步骤,下面介绍几个分区方案. 方案 1 / :建议大小在 5GB 以上. swap :即交换分区,建议大小是物理内存的 1~2 倍. 方 ...