CODEWITHSUNDEEP
formsember.js
Josh Padnick
Josh Padnick

Reputation: 3268

EmberJS: Observer Not Being Triggered on Computed Property

I am building a handelbars helper that renders a checkbox group. My goal is to display a checkbox group with something like this and get two-way binding on selectedOptions:

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

I've used this pattern successfully with other form components and it's a big win. I'm able to render my allOptions and selectedOptions values as a checkbox group, but it's the two-way binding that's tripping me up. Any idea what I'm missing?

By the way, I'm using ember-cli, but that doesn't affect anything relating to this issue.

Here's my setup:

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

The sole purpose of this file is to link the Handelbars expression {{form-checkboxGroup}} to the view and template below.

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

And finally, to actually use my Handlebars helper, here's the consuming page's template and corresponding controller:

Consuming Page: templates/my-page.hbs

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

Backing Controller 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' }
    ],

    ...
});

So, all of this successfully renders the checkbox group nicely, but my efforts to capture the fact that a checkbox has been newly selected by using observes("[email protected]') is not working.

Any idea on how I can this up for two-way binding? Thanks in advance for assistance!

Upvotes: 0

Views: 458

Answers (1)

panta82
panta82

Reputation: 2721

No jsbin so I'm flying blind, but try this:

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

view.property is how you access view from template. You don't need that from the view itself (unless you have view property on your view).

Upvotes: 1

Related Questions