zoukankan      html  css  js  c++  java
  • Ember.js demo3

    <!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;
    }
  • 相关阅读:
    apiClould微信三方登录,qq三方登录
    微信小程序 使用环信聊天工具
    某些控件的应用
    记事本(查找与替换)
    记事本部分功能
    Winform——计算器进制转换
    Winform——计算器
    汉企C#面向对象——继承Practice
    汉企C#面向对象——继承
    二分法
  • 原文地址:https://www.cnblogs.com/wangwenfei/p/emberjs_demo3.html
Copyright © 2011-2022 走看看