Question

我正在构建一个呈现复选框组的handelbars助手。我的目标是显示一个类似于此的复选框组，并在selectedOptions上获得双向绑定：

{{form-checkboxGroup options=allOptions selectedOptions=selectedOptions}}

我已成功使用此模式与其他表单组件，这是一个巨大的胜利。我能够将allOptions和selectedOptions值渲染为复选框组，但这是让我绊倒的双向绑定。知道我错过了什么吗？

顺便说一下，我正在使用ember-cli，但这不会影响与此问题相关的任何内容。

这是我的设置：

Handlebars Helper：helpers / form-checkbox-group.js

此文件的唯一目的是将Handelbars表达式{{form-checkboxGroup}}链接到下面的视图和模板。

import FormCheckboxGroupView from 'my-app/views/util/form/form-checkbox-group';

export default Ember.Handlebars.makeBoundHelper(function( options ) {
    return Ember.Handlebars.helpers.view.call(this, FormCheckboxGroupView, options);
});

CheckboxGroup Handlebars模板：templates / util / form / form-checkbox-group.hbs

...
{{#each user in view.combinedOptions}}
    {{input type="checkbox" name="view.fieldName" checked=user.checked }} {{user.name}}
{{/each}}
...

CheckboxGroup视图：views / util / form / form-checkbox-group.js

...
export default FormCheckboxGroupView = Ember.View.extend( FormFieldMixin, {
    templateName: 'util/form/form-checkbox-group',

    selectedOptions: function() {
        console.log("When triggered this could update view.selectedOptions");
    }.observes('view.combinedOptions.@each.checked'),

    // combines the "options" and "selected options" into a single array of "combinedOptions" explicitly indicating what's checked
    combinedOptions: function() {
        ...
        // sample result of combinedOptions:
        // { name: "Johnny Five", id: "12", checked: true }
        return combinedOptions;
    }.property('view.options', 'view.selectedOptions')
});

最后，要实际使用我的Handlebars助手，这里是消费页面的模板和相应的控制器：

使用Page：templates / my-page.hbs

{{form-checkboxGroup options=allUsersArray selectedOptions=selectedUsersArray fieldName="selectedProvidersArray" }}

支持使用控制器页面：controllers / my-page.js

export default MyPageController = Ember.Controller.extend( FormMixin, {

    allUsersArray: [
        { name: 'Bill Huxtable',     id: 'billy' },
        { name: 'Samantha Jones',    id: 'jones' },
        { name: 'Tony Pepperoni',    id: 'tonyp' },
        { name: 'Ridonk Youliss',    id: 'silly' }
    ],

    selectedUsersArray: [
        { name: 'Tony Pepperoni',    id: 'tonyp' },
        { name: 'Ridonk Youliss',    id: 'silly' }
    ],

    ...
});

因此，所有这些都成功地呈现了复选框组，但我努力捕获使用observes("view.combinedOptions.@each.checked')新选中复选框的事实不起作用。

关于如何进行双向绑定的任何想法？在此先感谢您的帮助！

Answer 1

没有jsbin因此我会盲目飞行，但试试这个：

selectedOptions: function() {
    console.log("When triggered this could update view.selectedOptions");
}.observes('combinedOptions.@each.checked')

view.property是您从模板访问视图的方式。您不需要从视图本身（除非您的视图中有view属性）。

EmberJS：观察者未被计算属性触发

1 个答案: