Ember.js Ember 1.0 RC6的路由器理解问题_Ember.js_Ember Data

Ember.js Ember 1.0 RC6的路由器理解问题

ember.js

Ember.js Ember 1.0 RC6的路由器理解问题,ember.js,ember-data,Ember.js,Ember Data,以下代码在RC4中运行良好，但在RC6中不起作用index.html#/users/1/edit不会填写表单来编辑用户条目。有谁能告诉我，为了让这个新路由器正常工作，我必须做些什么改变 app.js App = Ember.Application.create(); App.Router.map(function() { this.resource('users', function() { this.resource('user', { path: ':user_id' }, f

以下代码在RC4中运行良好，但在RC6中不起作用

index.html#/users/1/edit

不会填写表单来编辑用户条目。有谁能告诉我，为了让这个新路由器正常工作，我必须做些什么改变

app.js

App = Ember.Application.create();

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

App.UsersRoute = Ember.Route.extend({
  model: function() {
    return App.User.find();
  }
});

App.UserController = Ember.ObjectController.extend();

App.UserEditRoute = Ember.Route.extend({
  model: function() {
    return this.modelFor("user")
  },

  renderTemplate: function() {
    this.render({ into: 'users' });
  },

  setupController: function(controller, model) {
    if (model.get('isNew') == false) {
      var map = this.map || Ember.Map.create();
      this.map = map;
      var transaction = this.get('store').transaction();
      if (map.get(model)) {
        transaction = map.get(model);
      } else {
        map.set(model, transaction);
        transaction.add(model);
      }
    }
  },

  events: {
    commitThis: function(model) {
      var map = this.map;
      var transaction = map.get(model);
      transaction.commit();
      map.remove(model);
      App.Router.router.transitionTo('users.index')
    },
    rollbackThis: function(model) {
      var map = this.map;
      var transaction = map.get(model);
      transaction.rollback();
      transaction.add(model);
      App.Router.router.transitionTo('users.index')
    }
  }
});

App.UserEditController = Ember.ObjectController.extend({
  save: function(model) {
    this.send('commitThis', model)
  },

  undo: function(model) {
    this.send('rollbackThis', model)
  }
});

App.Store = DS.Store.extend({
  adapter: 'DS.FixtureAdapter'
});

App.User = DS.Model.extend({
  firstName: DS.attr('string'),
  lastName: DS.attr('string')
});

App.User.FIXTURES = [{
  id: 1,
  firstName: "Yehuda",
  lastName: "Katz"
}, {
  id: 2,
  firstName: "Tom",
  lastName: "Dale"
}]

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Userlist Demo</title>
  <link href="css/bootstrap.css" rel="stylesheet">
  <style>
    body {
      padding-top: 60px;
    }
  </style>
  <link href="css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>

  <script type="text/x-handlebars">
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="brand" href="#">Demo</a>
          <div class="nav">
            <ul class="nav">
              <li>{{#linkTo 'users'}}Users{{/linkTo}}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="container">
      {{outlet}}
    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="index">
    <h2>Demo Ember.js Application</h2>
    <p>
      A list of all users can be found {{#linkTo 'users'}}here{{/linkTo}}.
    </p>
  </script>

  <script type="text/x-handlebars" data-template-name="users">
    <div class='row'>
      <div class='span7'>
        <table class='table table-striped'>
          <thead>
            <tr>
              <th>First name</th>
              <th>Last name <i class="icon-arrow-down"></i></th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {{#each this itemController="user"}}
              <tr {{bindAttr class="isDirty:warning"}}>
                <td>{{firstName}}</td>
                <td>{{lastName}}</td>
                <td>
                  {{#unless isNew}}
                    {{#linkTo 'user.edit' this activeClass="disabled" classNames="btn btn-small"}}<i class="icon-edit"></i> Edit{{/linkTo}}
                  {{/unless}}
                </td>
              </tr>
            {{/each}}
          </tbody>
        </table>
      </div>
      <div class='span5'>
        {{outlet}}
      </div>
    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="user/edit">
    <h2>Edit</h2>
    <p><strong>First name</strong><br>{{input value=firstName type=text tabindex=1}}</p>
    <p><strong>Last name</strong><br>{{input value=lastName type=text tabindex=2}}</p>

    <p>
      <button {{action 'save' this}} {{bindAttr class=":btn :btn-small :btn-primary content.isDirty:enabled:disabled"}} tabindex=4>Save changes</button>
      <button {{action 'undo' this}} {{bindAttr class=":btn :btn-small content.isDirty:enabled:disabled"}} tabindex=5>Undo changes</button>
    </p>
  </script>

  <script src="js/libs/jquery-1.9.1.js"></script>
  <script src="js/libs/handlebars.js"></script>
  <script src="js/libs/ember.js"></script>
  <script src="js/libs/ember-data.js"></script>
  <script src="js/libs/md5.js"></script>
  <script src="js/app.js"></script>

</body>
</html>


用户列表演示
身体{
填充顶部：60px；
}

{{{#链接到“用户”}用户{{/linkTo}

{{outlet}}
演示Ember.js应用程序

所有用户的列表可以在{{{{linkTo'users'}}这里{/linkTo}找到。

名字
姓
{{{#每个this itemController=“user”}
{{firstName}}
{{lastName}}
{{{#除非是新的}
{{{#linkTo'user.edit'this activeClass=“disabled”classNames=“btn btn small”}}编辑{{/linkTo}
{{/除非}
{{/每个}}
{{outlet}}
编辑
名字
{{input value=firstName type=text tabindex=1}
姓氏
{{input value=lastName type=text tabindex=2}

保存更改
撤消更改

很确定这是因为

App.UserEditRoute.setupController

没有调用

\u super

。奇怪的是，我认为在RC4中打破零钱。无论如何，试试这个：

App.UserEditRoute = Ember.Route.extend({
  // ...
  setupController: function(controller, model) {
    this._super(controller, model);
    // ...
  }
}

可能相关：似乎

setupController

正在路由对象上保存状态（

this.map

）。令人惊讶的是，它居然能工作，当然有可能引发问题。相反，setupController应该设置本地控制器或模型参数的属性，或者使用此.controllerFor（）访问另一个控制器

在这种情况下，似乎不需要很多代码，只需保存/回滚模型本身即可。因此，为了简化：

App = Ember.Application.create();

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

App.UsersRoute = Ember.Route.extend({
  model: function() {
    return App.User.find();
  }
});

App.UserController = Ember.ObjectController.extend();

App.UserEditRoute = Ember.Route.extend({
  model: function() {
    return this.modelFor("user")
  },

  renderTemplate: function() {
    this.render({ into: 'users' });
  },

  events: {
    save: function(model) {
      model.save().then( function() {
        App.Router.router.transitionTo('users.index')
      }, function() {
        alert('save failed!');
      });
    },
    undo: function(model) {
      model.rollback();
      App.Router.router.transitionTo('users.index')
    }
  }
});

App.Store = DS.Store.extend({
  adapter: 'DS.FixtureAdapter'
});

App.User = DS.Model.extend({
  firstName: DS.attr('string'),
  lastName: DS.attr('string')
});

App.User.FIXTURES = [{
  id: 1,
  firstName: "Yehuda",
  lastName: "Katz"
}, {
  id: 2,
  firstName: "Tom",
  lastName: "Dale"
}]

请参见此处的工作示例：