在這種情況下使用Ember.js控制器的正確方法是什麼？

我正在編寫一個Ember.js應用程序來顯示從CRUD RESTful API中提取的嵌套註釋列表。在這種情況下使用Ember.js控制器的正確方法是什麼？

過了半路，我意識到我可能會誤用Ember.js而不是利用它的範例。

例如，我Comment物體看起來是這樣的：

App.Comment = Em.Object.extend({ 
    id: null, 
    author: null, 
    text: null, 

    delete: function() { /* AJAX call to API here */ } 
});

是否佯裝哈delete()功能作爲模型對象的一部分，而不是一個控制器？

我的另一個疑問是我處理狀態。在我的模板我做這樣的事情：

{{#if view.comment.editing}} 
    {{view Ember.TextArea valueBinding="view.comment.text"}} 
    <a href="#" {{action cancelEditingComment}}>Cancel</a> 
{{else}} 
    <p>{{view.comment.text}}</p> 
    <a href="#" {{action editComment}}>Edit</a> 
{{/if}}

在我的路由器

然後，editComment和cancelEditingComment行動將委託給Comment，它具有功能：

startEditing: function() { this.set('editing', true); } 
cancelEditing: function() { this.set('editing', false); }

我不禁想，我做錯了什麼，雖然這種代碼似乎工作。

對於如何重組我的代碼，以及任何可能幫助我的建議閱讀，您有什麼建議嗎？

來源

2012-12-05 Salvatore Iovene

從我的經驗來看，你的模型應該沒有任何商業邏輯。如果你有一些可以生成的複雜字段，它應該只有一組字段，也許還有一些計算屬性。

您的視圖委託給您的控制器絕對是刪除的正確舉措。當涉及到編輯時，雖然只是真正關注這個（通常）的視圖，但我傾向於使視圖本身成爲其中的一部分。然後你可以檢查這個標誌來決定是否繪製簡單的文本或者輸入一個textarea。

App.controller = Em.Object.create({ 
    comments: [], 

    deleteComment: function(comment) { 
     this.get('comments').removeObject(comment); 
    } 
}); 

App.CommentView = Em.View.extend({ 
    comment: null, 
    isEditing: null, 

    delete: function() { 
     App.controller.deleteComment(this.get('comment')); 
    }, 

    startEditing: function() { 
     this.set('isEditing', true); 
    } 
});

來源

2012-12-05 10:51:07 Drew

謝謝，這聽起來不錯。我試圖從'Comment'將'isEditing'邏輯移動到我的視圖中，但編輯邏輯位於我的控制器中（我認爲它應該）。當我在控制器中時，我不能執行'this.get（'view'）。set（'isEditing'，true）;'我該怎麼做？也許可以更改我的路由器，以便將「操作」委派給視圖，然後再委託給控制器？ –

在您的視圖中添加「isEditing」是基於您只是在改變渲染方式的假設。對不起，我應該更清楚了。我可能只是將該字段移回到您的評論，但一定要從控制器而不是模型本身進行設置。 – Drew

你的假設是正確的：我*只*改變它的渲染方式，所以我確信'isEditing'屬於視圖。您可以評論我是否應該首先將操作委託給視圖，或者先將控制器委託給路由器？ –

在這種情況下使用Ember.js控制器的正確方法是什麼？

回答

相關問題