Question

我创建了一个简单的表单来向我的数据库添加项目。每个项目都有很多技能，所以我设置了一个#each迭代每个技能并在表单中添加复选框。我通过在表单中使用render帮助程序来执行此操作，因为不同的控制器包含这些技能。所以我在我的items/new模板中有这个：

{{render 'skills'}}

然后我的技能模板如下所示：

    <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>

我的itemController是这样的：

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')
});

一切正常，新项目正确提交给服务器。问题是我将要输入很多项目，所以我将表单设置为在保存新项目后自动重置。我这样做是通过创建一个新记录并将其设置为模型：

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);
        });   
    }
}

除了技能复选框之外，所有其他表单字段都正常重置，我无法找出原因。我尝试将itemsNew模型添加到观察者或手动从模型中删除技能，但它不会在浏览器中更新。

关于为什么这不起作用的任何想法或关于如何更好/正确地做到这一点的建议？任何帮助，将不胜感激。谢谢！

Answer 1

当人们点击复选框时，您正在破坏计算属性。计算属性就是计算属性。它是基于其他属性（通常只是一个getter）派生的属性。它不是在其他属性上派生的属性，然后设置它，然后它决定再次开始成为计算属性。

这基本上就是这里发生的事情，你只用一个值（true / false）覆盖计算属性。

话虽这么说，你会想尝试另一种方法，其中selected只是一个属性，另一个属性设置是它开始（当然它们点击它时）。

  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')
  });

表单提交后重置复选框

1 个答案: