Dynamically Create Inputs With Ember (and Retrieve Their Values)

I'm working with Ember.JS on the front-end and need to be able to create x number of input checkboxes depending on my model. Basically I want to do something like: {{#each model}}

Solution 1:

You can use Em.computed.filterBy to get the selected object values.

App.ApplicationController = Ember.ArrayController.extend({
  content: [
      { name: "Michael" },
      { name: "Bala" },
      { name: "Velmurugan" },
      { name: "raja" }
  ],
  selectedContacts: Em.computed.filterBy('content','isSelected')
});

<script type="text/x-handlebars"id="application">
    <ul class="list-unstyled">
    {{#each content}}
        <li>
        <div class="checkbox">
            <label>
              {{input type="checkbox" checked=isSelected}} {{name}}
            </label>
          </div>
        </li>
    {{/each}}
    <ul>
    Selected Contacts:
   <ul>
    {{#each selectedContacts}}
        <li>  {{name}}</li>
    {{/each}}
    <ul>

 </script>

Here sample fiddle

Solution 2:

Each checkbox should be bound to something on the model (or the controller).

{{#each item in model itemController="thing"}} 
                 <!-- ^ this will look for a controller named ThingController --><li>
    {{item.color}}
    {{input type="checkbox" checked=isChecked}}
                          <!--      ^ each Thing model should have an isChecked boolean
                                      or the ThingController can have it --></li>
{{/each}}

Assuming you are using an ArrayController the checkboxes would be some boolean on each of the models for the ArrayController.

If you are using an ObjectController presumably that has an array of things and you can loop over each of those.

The value will automatically be bound to the state of the checkbox for each model. So as long as you have a handle on the models you can see the corresponding checks.

Here is an example using plain JS objects: http://jsbin.com/dubewuxa/4/edit?html,js,console,output

If you're using ember-data you'd say item.get('good') in the action from that example.