EmberJS - Checkboxes and Getting Values in Controller

Question

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);
        }
    }
});

splattne · Accepted Answer · 2014-12-17 11:52:23Z

1

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}}

edited Dec 17, 2014 at 11:52

answered Dec 17, 2014 at 11:46

splattne

104k54 gold badges206 silver badges250 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sisir Over a year ago

Okey understood. But thing is the red, green or blue terms are arbitrary. It could be any numbers of terms with any name. Think this as categories of a blog post.

splattne Over a year ago

Then use the first approach I mentioned. Add a property to you term objects. I've updated my answer.

Collectives™ on Stack Overflow

EmberJS - Checkboxes and Getting Values in Controller

Problem

HTML

JS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Problem

HTML

JS

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related