ember.js101 入门教程第五课-CSDN博客

单向数据绑定意味着当数据更改时，该模板将保持最新的更新。双向数据绑定更进一步，允许和表单字段实时保持更新数据。为了演示，让我们增加一个编辑功能，来看看效果。

增加了一个 edit按钮；

表单字段改变时，左边数据实时更新，这有点像键盘录入时的效果；

Done确认后的效果；

好了，下面我们来看具体实现过程。

双向数据绑定，路由事件

1、定义表单和按钮

<h2>Edit User</h2>
<form class="form-inline">
  <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>

现在，当我们浏览到用户并单击edit时，你会注意到表单域中已经有了它们的值。如果我们编辑它们，主视图会更新。我们希望这个应用程序单击Done 可以把我们带回到用户界面（第一张图或第三张图的样子）。ember允许通过改变按钮的语句{ { #linkTo} }实现，不过这次我们用另一种方式提交表单：
首先，我们在我们的模板中添加一个action 称为保存。默认情况下，单击Done会触发，所以我们需要指定要执行提交的操作。

<form class="form-inline" {{action save on="submit"}}>

然后我们添加EditUserRoute路由,一个路由可以有一个事件对象。

App.EditUserRoute = Ember.Route.extend({
  // ...
  events: {
    save: function() {
      var user = this.modelFor('editUser');
      this.transitionTo('user', user);  
    }
  }
});

我们要求在Edituser 路由模型在数据保存到user模型后跳转到UserRoute路由。

完整代码：

<!DOCTYPE html>
<!--
Created using JS Bin
http://jsbin.com

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

Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<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="http://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 />
<link href="http://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">
          {{#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">  //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">  //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 id="jsbin-javascript">
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() {    //定于顶层路由使用的数据users
    return users;                                     
  }
});

App.UserRoute = Ember.Route.extend({
  model: function(params) {          //定于User路由使用的数据users[0,1,2]
    return users[params.user_id];
  }
});

App.EditUserRoute = Ember.Route.extend({
  model: function(params) {           //定于EditUser路由使用的数据users[0,1,2]
    return users[params.user_id];
  },
  
  events: {
    save: function() {
      var user = this.modelFor('editUser');   //editUser 模型的数据 存入user 变量，注意这里的editUser是上面定义的资源；
      this.transitionTo('user', 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>