EmberJS:观察者不被触发的计算属性

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车把模板:templates/util/form/form- CheckboxGroup .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('[e-mail]'),
    // 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帮助器，这里是消费页面的模板和相应的控制器:

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

backbackcontroller for Consuming Page: 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("[e-mail]')捕获复选框已被新选中的事实的努力不起作用。

有什么主意吗，我怎么能使它双向绑定?提前感谢您的协助!

Answer 1

没有jsbin，所以我是盲目的，但试试这个:

selectedOptions: function() {
    console.log("When triggered this could update view.selectedOptions");
}.observes('[e-mail]')

view.property是如何从模板访问视图的。你不需要从视图本身(除非你有view属性在你的视图)。