EmberJS:观察者未在计算属性上触发

乔什·帕德尼克(Josh Padnick)

我正在构建一个呈现复选框组的handelbars帮助器。我的目标是显示一个带有以下内容的复选框组,并在selectedOptions以下位置进行双向绑定

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

我已经将这种模式成功地与其他表单组件一起使用,这是一个很大的胜利。我可以将我的allOptionsselectedOptions呈现为复选框组,但这是双向绑定使我绊倒了。知道我想念的是什么吗?

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

这是我的设置:

车把帮手: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-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('[email protected]'),

    // 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帮助器,这是使用页面的模板和相应的控制器:

消费页面: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("[email protected]')

关于如何实现双向绑定的任何想法吗?在此先感谢您的协助!

panta82

没有jsbin,所以我视而不见,但是请尝试以下操作:

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

view.property这是您从模板访问视图的方式。您不需要视图本身(除非您view在视图中具有属性)。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

为什么为新连接的观察者两次触发LiveData观察者

VueJ,计算属性和观察者之间的区别?

“观察者”与“通知”(在属性块中)与“观察者”与“侦听器”之间的区别

灰烬计算属性vs灰烬观察者

数据变量未从观察者使用Vuex在Vue.js中的计算属性上更新

Aurelia观察者未触发阵列

v-如果未在计算属性上触发

元素属性观察者事件更改

MutableLivedata观察者触发

灰烬:观察者为什么不触发计算?

Livedata观察者多次触发

观察者未在初始化时触发,但可在装入时工作

MutableLiveData的观察者未触发

在Android上重构观察者

当我设置可观察者时,mobx反应观察者不会触发

观察者模式:独立观察属性

Ember.js观察者在计算属性上不起作用。指南中的示例

在RMI上实现观察者模式

为什么此Ember.computed属性的观察者会触发两次?

甚至在模板中使用属性时,也会触发DS.Model中属性的观察者

灰烬组件观察者属性

防止Ember观察者触发方法的设置属性

在扩展中的弱属性上添加didSet观察者

该应用程序未在观察者中列出

Ember - 当在下一条路线的 didTransition 钩子中设置属性时,上一条路线中的观察者会触发

Firebase iOS 数据观察者未在 iPhone 上定期响应

通知中心观察者未在 swift 4 中调用

ViewModel 不会触发 mutablelivedata 的观察者

使用计算属性而不是 VueJS 2 中的观察者更新嵌套的 v-model