Reputation: 2333
I'm writing an Ember.js
app to show a list of nested comments fetched from a CRUD RESTful API.
Half way through, I realize I'm probably misusing Ember.js
and not taking advantage of its paradigms.
For instance, my Comment
object looks like this:
App.Comment = Em.Object.extend({
id: null,
author: null,
text: null,
delete: function() { /* AJAX call to API here */ }
});
Is it alright to ha the delete()
function as part of the model object, instead of a controller?
Another doubt I have is in my handling of states. In my template I do something like this:
{{#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}}
Then in my router, the editComment
and cancelEditingComment
actions will delegate to Comment
, which has functions:
startEditing: function() { this.set('editing', true); }
cancelEditing: function() { this.set('editing', false); }
I can't help but think that I'm doing something wrong, although this kind of code seems to work.
Do you have any suggestions about how to reorganize my code, and any recommended reading that might help me with this?
Upvotes: 1
Views: 104
Reputation: 2299
From my experiences, your model shouldn't really have any business logic in it. It should just have a set of fields and maybe some computed properties if you have some complex fields that can be generated.
Your view delegating to your controller is definitely the right move for deleting. When it comes to editing though, seeing as it's only really your view that cares about this (typically), I'd be inclined to make isEditing
part of the view itself. Then you can check this flag to decide whether to draw simple text or a textarea for input.
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);
}
});
Upvotes: 2