CODEWITHSUNDEEP
model-view-controllerember.js
Salvatore Iovene
Salvatore Iovene

Reputation: 2333

What is the proper way to use Ember.js controllers in this scenario?

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

Answers (1)

Drew
Drew

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

Related Questions