0

以下代码适用于 RC4，但不适用于 RC6。index.html#/users/1/edit不填写表单来编辑用户条目。谁能告诉我我必须改变什么才能让它与新路由器一起工作？

应用程序.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"
}]

索引.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>
4

1 回答 1

0

很确定这是因为App.UserEditRoute.setupController没有调用_super. 奇怪的是，我认为 RC4 中的重大变化又回来了。无论如何，试试这个：

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

可能相关：似乎在路由对象上setupController保存状态（ ）。this.map令人惊讶的是它完全有效，肯定有可能导致问题。相反 setupController 应该在本地控制器或模型参数上设置属性，或者使用 this.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"
}]

请参阅此处的工作示例：http: //jsbin.com/ixucos/2/edit

于 2013-07-08T17:26:12.800 回答