CODEWITHSUNDEEP
javascriptcheckboxember.js
bookthief
bookthief

Reputation: 2451

Populate checkbox values with model data in Ember.js

I have an ember application which has a number of users. Each of these users can be associated with a number of subjects. So I have a subjects model:

App.Subjects = DS.Model.extend({
  subject         : DS.attr('string'),
});

App.Subject.FIXTURES = [{
  id: 1,
  name: 'Sales',

}, {
  id: 2,
  name: 'Marketing',

}

];

and a users model:

App.User = DS.Model.extend({
  name         : DS.attr(),
  email        : DS.attr(),
  subjects       : DS.hasMany('subject'),

});

App.User.FIXTURES = [{
  id: 1,
  name: 'Jane Smith',
  email: '[email protected]',
  subjects: ["1", "2"]

}, {
  id: 2,
  name: 'John Dorian',
  email: '[email protected]',
  subjects: ["1", "2"]
}

];

I am having trouble representing this 1:M relationship in my templates. I have an edit user template (which Im also using to create a user) in which you can select the user's subjects via checkboxes. However, I want these checkboxes to be driven by the data in my subjects model. Is this possible? I have found very little documentation online and am very new to ember development. Here is my template:

<script type = "text/x-handlebars" id = "user/edit">

<div class="input-group">
<div class="user-edit">


  <h5>User name</h5>
  {{input value=name}}

  <h5>User email</h5>
  {{input value=email}}

  <h5>Subjects</h5>

{{input type="checkbox" value = "sales" name="sales" checked=sales}}
{{input type="checkbox" value = "support" name="support" checked=support}}

</div>
<button {{action "save"}}> Save </button>
</div>
</script>

EDIT: Here is my current userController.js

App.UserController = Ember.ObjectController.extend({

  deleteMode: false,

  actions: {
    delete: function(){

      this.toggleProperty('deleteMode');
    },
    cancelDelete: function(){

      this.set('deleteMode', false);
    },
    confirmDelete: function(){
      // this tells Ember-Data to delete the current user
      this.get('model').deleteRecord();
      this.get('model').save();
      // and then go to the users route
      this.transitionToRoute('users');
      // set deleteMode back to false
      this.set('deleteMode', false);
    },
    // the edit method remains the same
    edit: function(){ 
      this.transitionToRoute('user.edit');
    }
  }
});

Upvotes: 0

Views: 541

Answers (1)

fanta
fanta

Reputation: 1489

what you need to do is change this line in your template:

{{#each subject in user.subject}}
  {{subject.name}},
{{/each}}

for this:

{{#each subject in user.subjects}}
  {{subject.name}},
{{/each}}

did you notice I changed subject for subjects ?

and, I would also recommend you to change this code in App.SubjectController:

selected: function() {
    var user = this.get('content');
    var subject = this.get('parentController.subjects');
    return subject.contains(user);
}.property()

to this:

selected: function() {
    var subject = this.get('content');
    var userSubjects = this.get('parentController.subjects');
    return userSubjects.contains(subject);
}.property()

that's a better representation of the data.

Upvotes: 1

Related Questions