ember.js101 入門教程第六課

時間 2019-11-20

標籤 ember.js101 ember 入門教程第六欄目 JavaScript 简体版

原文原文鏈接

要想用這個用戶列表的例子來充分展現ember.js，咱們須要可以建立新的用戶,不然用戶列表功能就沒有任何實際的應用價值了。建立新的用戶其實並不須要users/:user_id/edit創建一個新的路由，只是要建立一個對象就能夠達到目的。css

在列表中添加對象

一、添加一個`createUser`「建立用戶」按鈕

<li><a href="#" {{action createUser}}>+ New User</a></li>

二、添加處理程序語句

如今咱們將一個處理程序 events 添加到應用程序的路由，而後轉向用戶編輯頁面：html

App.ApplicationRoute = Ember.Route.extend({
  model: function() {
    return users;
  },

  events: {
    createUser: function() {
      var users = this.modelFor('application');    // 定義數據來源於 application 數據模型     
      var user = users.pushObject({id: users.length});   //建立一個新用戶
      this.transitionTo('editUser', user);    // 轉向 editUser 頁面
    }
  }
});

你可能會想到pushobject不是一個JavaScript的數組方法啊？當你爲路由的 model 鉤子提供了一個模型的時候，Ember 會把原始數組（users）轉換爲 ember array（ember擴展數組），（和原始數組相比）ember array 提供了 observation 以及諸如 pushObject 這樣的便利方法。也就是說，Ember 把JavaScript的原生數組擴展爲ember 數組，保持了原有數組特性和方法同時，也擴展一些新的方法便於web開發和應用，這些方法之一就是 pushObject 方法。
看不懂的話參照，nightire的文章，這裏特別感謝！jquery

完整代碼：web

<!DOCTYPE html>
<html>
<head>
  <meta name="description" content="Ember: Routes, {{outlet}}, and {{#linkTo}}" />
<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.3/handlebars.js"></script>
<script src="http://ember101.com/jsbin/ember.rc3.js"></script>
<meta charset=utf-8 />
<!--
Created using JS Bin
http://jsbin.com

Copyright (c) 2016 by symphonyh (http://jsbin.com/dataro/1/edit)

Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<title>Episode 5</title>

<style id="jsbin-css">
body { margin-top: 30px }

.active {
  color: red !important;
}
</style>
</head>
<body>
  
  <script type="text/x-handlebars">
    <div class="container">
      <div class="row-fluid">
        <ul class="nav nav-list span3 well">
          <li><a href="#" {{action createUser}}>+ New User</a></li>
          {{#each model}}
          <li>{{#linkTo "user" this}}{{first}}{{/linkTo}}</li>
          {{/each}}
        </ul>
        <div class="span9 well">{{outlet}}</div>
      </div>
    </div>
  </script>

  <script type="text/x-handlebars" id="user">
    <h2>
      {{first}} {{last}}
      <img {{bindAttr src="avatar"}} class="pull-right" width=50 />
    </h2>
    <dl>
      <dt>First</dt>
      <dd>{{first}}</dd>
      <dt>Last</dt>
      <dd>{{last}}</dd>
    </dl>
    {{#linkTo "editUser" this class="btn btn-primary"}}Edit{{/linkTo}}
  </script>

  <script type="text/x-handlebars" id="editUser">
    <h2>Edit User</h2>
    <form class="form-inline" {{action save on="submit"}}>
      <label>
        First:
        {{input type="text" value=first}}      
      </label><br>
    
      <label>
        Last:
        {{input type="text" value=last}}        
      </label>
    
      <div class="controls">
        <button type="submit" class="btn btn-primary">Done</button>
      </div>
    </form>
  </script>
  
<script>
var App = Ember.Application.create();

App.Router.map(function() {
  this.resource('user', {path: '/users/:user_id'});
  this.resource('editUser', {path: '/users/:user_id/edit'});
});

App.ApplicationRoute = Ember.Route.extend({
  model: function() {
    return users;
  },
  
  events: {
    createUser: function() {
      var users = this.modelFor('application');
      var user = users.pushObject({
        id: users.length
      });
      this.transitionTo('editUser', user);
    }
  }
});

App.UserRoute = Ember.Route.extend({
  model: function(params) {
    return users[params.user_id];
  }
});

App.EditUserRoute = Ember.Route.extend({
  model: function(params) {
    return users[params.user_id];
  },
  
  events: {
    save: function() {
      var user = this.modelFor('editUser');
      this.transitionTo('user', user);
    }
  }
});






var users = [
  {
    id: 0,
    first: 'Ryan',
    last: 'Florence',
    avatar: 'https://si0.twimg.com/profile_images/3123276865/5c069e64eb7f8e971d36a4540ed7cab2.jpeg'
  },
  {
    id: 1,
    first: 'Tom',
    last: 'Dale',
    avatar: 'https://si0.twimg.com/profile_images/1317834118/avatar.png'
  },
  {
    id: 2,
    first: 'Yehuda',
    last: 'Katz',
    avatar: 'https://si0.twimg.com/profile_images/3250074047/46d910af94e25187832cb4a3bc84b2b5.jpeg'
  }
];
</script>

</body>
</html>