<!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. ### CUDA

    CUDA Learning. #@author: gr #@date: 2014-04-06 #@email: forgerui@gmail.com 1. Introduction CPU和GPU的区 ...

  2. Vue.js中Directive知识

    近期所学的Vue.js这个MVVM前端技术缓解了我一直愁于前后端开发杂糅所带来的痛苦.今天就来说说关于Vue.js里面的Directive知识. Directive Directive看上去虽然和An ...

  3. strcpy（），string使用问题

    两个CString,把一个赋值给另外一个,用strncpy出现问题,直接=赋值正确了,不知道为什么?

  4. socket通信_笔记

    (socket通信) 客户端与服务器端通信问题: 我们首先要了解一个概念性的词汇:Socket socket的英文原义是“孔”或“插座”.作为进程通信机制,取后一种意思.通常也称作“套接字”,用于描述 ...

  5. call_user_func

    (PHP 4, PHP 5) call_user_func — 把第一个参数作为回调函数调用 mixed call_user_func ( callable $callback [, mixed $p ...

  6. PHOTOSHOP 制作虚线和实线

    1.制作实线可以直接用直线工具,选择合适的粗细大小. 2. 制作虚线首先要用钢笔或者绘图工具画出所需要的形状,如弧线,圆形等等     然后在路径面板中用画笔描边,画笔需要提前设置好粗细和间距,用方形 ...

  7. js组件开发流程

    html代码 <div id="div1"></div> <div id="div2"></div> <d ...

  8. 使用phpize安装php模块

    1.下载包 2./usr/local/php/bin/phpize 3../configure --enable-soap  --with-php-config=/usr/local/php/bin/ ...

  9. Python设计模式——模版方法模式

    1.模版方法模式 做题的列子: 需求:有两个学生,要回答问题,写出自己的答案 #encoding=utf-8 __author__ = 'kevinlu1010@qq.com' class Stude ...

  10. 使用imp加载python模块

    import impimport sysfn_, path, desc = imp.find_module('mymodule', ['/data/module/'])print fn_,path,d ...