2

所以不久前我问了一个类似的问题。然而，关于该解决方案的某些东西留下了难闻的气味。

这是场景，当我想创建一条记录时，我有一条新路线。例如PostsNewRoute，它看起来像：

App.PostsNewRoute = Ember.Route.extend({
  model: function() {
    return App.Post.createRecord({title: '', content: ''});
  },
  deactivate: function() {
    var controller = this.controllerFor('posts.new');
    var content = controller.get('content');
    if (content && content.get('isNew') && !content.get('isSaving')) {
      content.deleteRecord();
    }
  }
});

同样对于PostsEditRoute：

App.PostsEditRoute = Ember.Route.extend({
  model: function(params) {
    return App.Post.find(params.post_id);
  },
  deactivate: function() {
    var controller = this.controllerFor('posts.edit');
    var content = controller.get('content');
    if (content && content.get('isDirty') && !content.get('isSaving')) {
      content.rollback();
    }
  }
});

这对我来说似乎不对。我觉得有太多的代码来处理这个问题，并且在一个更大的应用程序中，我正在为许多对象执行此操作......

所以这是我尝试的另一种方法，它看起来更干净一些，但有它自己的问题（见跳转后）：

App.PostsNewRoute = Ember.Route.extend({
  model: function() {
    return App.Post.createRecord({title: '', content: ''});
  }
});

App.PostsEditRoute = Ember.Route.extend({
  model: function(params) {
    return App.Post.find(params.post_id);
  }
});

App.PostsFormView = Ember.View.extend({
  templateName: 'posts/form',
  tagName: 'form',
  classNames: ['form-horizontal'],

  buttonText: '',

  submit: function() {
    // TODO: validation
    this.get('controller').get('store').commit();
    this.get('controller').transitionToRoute('posts.index');
  },

  cancel: function() {
    var content = this.get('controller').get('content');
    if(content && !content.get('isSaving')) {
      if(content.get('isNew')) {
        content.destroyRecord();
      } else if(content.get('isDirty')) {
        content.rollback();
      }
    }
    this.get('controller').transitionToRoute('posts.index');
  }
});

模板：

<div class="control-group">
  <label class="control-label">Title:</label>
  <div class="controls">
    {{view Ember.TextField valueBinding='title'}}
  </div>
</div>
<div class="control-group">
  <label class="control-label">Content:</label>
  <div class="controls">
    {{view Ember.TextArea valueBinding='content'}}
  </div>
</div>
<div class="form-actions">
  <button class="btn btn-primary">{{view.buttonText}}</button>
  <a href="#" class="btn btn-danger" {{action cancel target='view'}}>Cancel</a>
</div>

这与我之前尝试的几乎相同，但是，现在如果用户单击导航链接或单击后退按钮，则内容不会被清理。

这两种方法似乎都不太正确，处理这个问题的正确或更好的方法是什么？

4

1 回答 1

2

好吧，我喜欢我在这个不错的小要点中发现的内容（有趣的部分接近底部）。

按照那个例子，我的（部分）PostsNewController看起来像这样：

startEditing: function() {
    this.transaction = this.get('store').transaction();
    this.set('content', this.transaction.createRecord(EmberBlog.Post, {}));
},

stopEditing: function() {
    if (this.transaction) {
        this.transaction.rollback();
        this.transaction = null;
    }
}

我的 PostsNewRoute 是这样的：

EmberBlog.PostsNewRoute = Ember.Route.extend({
  model: function() {
    return null;
  },

  setupController: function(controller) {
    controller.startEditing();
  },

  deactivate: function() {
    this.controllerFor('posts.new').stopEditing();
  }
});

我认为它应该很容易适应您的特定需求。

于 2013-04-16T14:07:16.843 回答