如何在emberjs中的視圖之間轉換時處理取消/回滾

Question

因此，我問了一段similar question。然而，關於該解決方案的東西留下了難聞的氣味。

這裏是場景，當我想創建一個記錄，我有一個新的路線。因此，例如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> 

然而，這作品幾乎一樣的東西我嘗試過，現在如果用戶點擊一個導航鏈接或點擊後退按鈕的東西沒有得到清理。

這兩種方式似乎並不完全正確，這將是處理這個正確的或更好的辦法？

Answer 1

很好，我很喜歡我在this nice little gist發現（最有趣的部分是接近底部）。

下面這個例子中，（部分）我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(); 
    } 
}); 

我認爲它應該是很容易適應您的具體需要。