CODEWITHSUNDEEP
javascriptember.jscheckbox
Sisir
Sisir

Reputation: 2816

EmberJS - Checkboxes and Getting Values in Controller

Below is a simple example how I intend to use check boxes. What I have is an array of terms with id and name field and each post can be assigned to a single or multiple terms/categories.

var config = {};

config.terms = [
    {id: 1, termName: 'Red'},
    {id: 2, termName: 'Green'},
    {id: 3, termName: 'Blue'}
];

Problem

With EmberJS handlebar expression I am showing those checkboxes but I am confused what to use as form element variable name field doesn't seem to defined in the controller. The checked field works as controller property but when I add termName as checked all of the checkboxes are checked by default and label after checking changes after clicking checkboxes.

What I need to get on the controller is the term names that are selected

Below is the example code. You can also find it on JsFiddle. Check uncheck the red/green/blue checkboxes to see the problem. Also have a look in console.

HTML

<div id="main"></div>

<script type="text/x-handlebars" data-template-name="index">
    {{#each term in terms}}
        {{input type="checkbox" name=term.name}} {{term.name}}
    {{/each}}
    <button {{action "submit"}}>Submit</button>
</script>

JS

var config = {};

config.terms = [
    {id: 1, name: 'Red'},
    {id: 2, name: 'Green'},
    {id: 3, name: 'Blue'}
];

App = Ember.Application.create({
    rootElement: '#main'
});

App.IndexRoute = Ember.Route.extend({
    setupController: function(controller){
        controller.set('terms', config.terms);
    }
});

App.IndexController = Ember.Controller.extend({
    actions: {
        submit: function(){
            console.log(this.Red);
            console.log(this.Blue);
            console.log(this.Green);
        }
    }
});

Upvotes: 0

Views: 942

Answers (1)

splattne
splattne

Reputation: 104040

In you jsfiddle example you'r binding the name to the checked value of the checkbox. I think that's not what you want to do.

The checked value should be bound to a boolean value.

So,

1st approach: either add a property to your term object (selected: false)

 config.terms = [
     {id: 1, name: 'Red', selected: false },
     {id: 2, name: 'Green', selected: false },
     {id: 3, name: 'Blue', selected: false }
 ];

(as Ember objects:)

 config.terms = [
     Em.Object.create({id: 1, name: 'Red', selected: false }),
     Em.Object.create({id: 2, name: 'Green', selected: false }),
     Em.Object.create({id: 3, name: 'Blue', selected: false })
 ];

and then bind the property in your template this way:

{{input type="checkbox" checked=term.selected}}

2nd approach: bind it to controller properties:

// inside your controller:
redSelected: false,
greenSelected: false,
blueSelected: false,


{{input type="checkbox" checked=controlller.redSelected}}

Upvotes: 1

Related Questions