Reset check boxes after form submission - ember.js

Question

I've created a simple form to add items to my database. Each item hasMany skills so I've set up a #each to iterate over each skill and add checkbox into the form. I'm doing this by using a render helper in my form because a different controller contains the skills. So I have this in my items/new template:
{{render 'skills'}}
And then my skills template looks like this:
<script type="text/x-handlebars" data-template-name="skills">
<div class="form-group">
{{#each skill in model itemController="skillCheckbox"}}
<div class="checkbox">
<label>
{{input type="checkbox" checked=selected}}
{{skill.name}}
</label>
</div>
{{/each}}
</div>
</script>
My itemController is like this:
App.SkillCheckboxController = Ember.ObjectController.extend({
needs:['itemsNew'],
selected:function() {
var skill = this.get('content');
var skills = this.get('controllers.itemsNew.model.skills');
return skills.contains(skill);
}.property('controllers.itemsNew.model.skills'),
selectedChanged:function() {
var skill = this.get('content');
var controller = this.get('controllers.itemsNew.model.skills');
if(this.get('selected')) {
controller.addObject(skill);
} else {
controller.removeObject(skill);
}
}.observes('selected')
});
Everything works fine and the new item is submitted to server properly. The problem is that I'm going to be entering in a lot of items so I have the form setup to automatically reset after a new item is saved. I do this by created a new record and setting it as the model:
actions:{
save:function() {
var self = this;
var model = this.get('model');
var promise = model.save();
promise.then(function(){
var newModel = self.store.createRecord('item');
self.set('model',newModel);
});
}
}
All the other form fields reset as normal, except for the skill checkboxes and I can't figure out why. I've tried adding the itemsNew model to the observer or removing the skills from the model manually, but it doesn't update in the browser.
Any ideas on why this isn't working or suggestions on how to do it better/correctly? Any help would be appreciated. Thanks!

Answer 1

You're breaking the computed property when people click the check box. Computed properties are just that, a computed property. It's a property that's derived based on the other properties (and generally just a getter). It isn't a property that's derived on other properties, then you set it, and then it decides to start being a computed property again.
That's essentially what's happening here, you're overwriting the computed property with just a value (true/false).
That being said, you'll want to try another approach, where selected is just a property, and another property set's it to start (and when they click it of course).
App.SkillCheckboxController = Ember.ObjectController.extend({
needs:['itemsNew'],
selected:false,
initialSetup: function(){
var skill = this.get('content'),
skills = this.get('controllers.itemsNew.model.skills');
this.set('selected', skills.contains(skill));
}.observes('model', 'controllers.itemsNew.model.skills')
});