title: Binding model and views in ember checkbox
body: <p>Don't understand which syntax bind my model and checkbox view.</p>
  
  <p>My problem is: Ember works with true/false value in checkbox, but in my model fields contain 1 or 0.
  Tell me the right way plz</p>
  
  <p>example index.htlml :</p>
  
  <pre><code>      &lt;script type="text/x-handlebars" id="alerts"&gt;
          &lt;div class="container main_container"&gt;
  
              &lt;div id="metrics_main"&gt;
                  &lt;div id="legend"&gt;
                      &lt;span id="legend_name"&gt;metric name&lt;/span&gt;
                      &lt;span id="legend_coefficient"&gt;anomalous datapoint&lt;/span&gt;
                  &lt;/div&gt;
  
  
                  &lt;div id="metrics_listings"&gt;
                    &lt;table width="100%"&gt;
                      {{#each alert in controller}}
                        {{view view.TableRowView}}
                      {{else}}
                      &lt;li&gt;no alerts/// :(&lt;/li&gt;
                      {{/each}}
                    &lt;/table&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
    &lt;/script&gt;
  
    &lt;script type="text/x-handlebars" data-template-name="alert-row" id="alert"&gt;
      &lt;tr class="sub selected"&gt;
  
      &lt;td width="60%"&gt;
         {{alert.name}}
       &lt;/td&gt;
      &lt;td &gt;
         checked: {{alert.isChecked}}
         {{view Ember.Checkbox checkedBinding="alert.isChecked"}}
       &lt;/td&gt;
       &lt;td &gt;
        active: {{alert.isActive}}
       &lt;/td&gt;
       &lt;td &gt;
        {{alert.value}}
       &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/script&gt;
  </code></pre>
  
  <p>and app.js:</p>
  
  <pre><code>    App = Ember.Application.create();
  
  App.ApplicationAdapter = DS.FixtureAdapter;
  
  App.Alert = DS.Model.extend({
    name         : DS.attr(),
    value        : DS.attr(),
    isChecked    : DS.attr(),
    isActive    : DS.attr(),
    creationDate : DS.attr(),
    count   :DS.attr(),
    comment :DS.attr(),
    graphData :DS.attr()
  });
  
  App.Alert.FIXTURES = [{
    id: 1,
    name: 'name1',
    value: 345,
    isChecked: 1,
    isActive: 1,
    creationDate: 'Mon, 26 Aug 2013 20:23:43 GMT',
    count: 1,
    comment: ''
  }, {
    id: 2,
    name: 'name2',
    value: 3453,
    isChecked: 0,
    isActive: 1,
    creationDate: 'Mon, 26 Aug 2013 20:23:43 GMT',
    count: 1,
    comment: ''
  }, {
    id: 3,
    name: 'name3',
    value: 3453,
    isChecked: 1,
    isActive: 1,
    creationDate: 'Mon, 26 Aug 2013 20:23:43 GMT',
    count: 1,
    comment: ''
  }, {
    id: 4,
    name: 'name4',
    value: 3453,
    isChecked: 0,
    isActive: 1,
    creationDate: 'Mon, 26 Aug 2013 20:23:43 GMT',
    count: 1,
    comment: ''
  }
  ];
  
  App.Router.map(function() {
    this.resource('alerts');
  });
  
  App.IndexRoute = Em.Route.extend({
      redirect: function(){
          this.transitionTo('alerts');
      }
  });
  
  App.AlertsRoute = Ember.Route.extend({
    model: function(){
      return this.store.find('alert'); 
    }
  });
  
  
  App.AlertView = Ember.View.extend({
      templateName: 'alert',
  });
  
  App.AlertController = Ember.Object.create({
  
  });
  
  App.AlertsView = Ember.View.extend({
      templateName: 'alerts',
  
      TableRowView: Ember.View.extend({
          templateName: 'alert-row'
      })
  
  });
  </code></pre>
  
  <p>I solved this by extending Ember.Checkbox, but I think there is another way:</p>
  
  <pre><code>Ember.CheckboxInt = Ember.Checkbox.extend({
  
    attributeBindings: ['checkedInt' ],
  
    checkedInt: 0,
  
    init: function() {
      this._super();
      if(this.checkedInt &gt; 0) this.checked = true;
      this.on("change", this, this._updateElementValue);
    },
  
    _updateElementValue: function() {
      Ember.set(this, 'checked', this.$().prop('checked'));
      Ember.set(this, 'checkedInt', this.$().prop('checked') ? 1 : 0 );
    }
  });
  
  {{view Ember.CheckboxInt  checkedIntBinding="alert.isChecked"}}
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>The "ember way" present in Todo example (<a href="http://emberjs.com/guides/getting-started/marking-a-model-as-complete-incomplete/" rel="nofollow">http://emberjs.com/guides/getting-started/marking-a-model-as-complete-incomplete/</a>)</p>
  
  <pre><code>App.AlertController = Ember.ObjectController.extend({
    isCheckedBool: function(key, value){
      var model = this.get('model');
  
      if (value === undefined) {
        // property being used as a getter
        return model.get('isChecked') &gt; 0;
      } else {
        // property being used as  setter
        model.set('isChecked', value == true ? 1 : 0);
        model.save();
        return model;
      }
    }.property('model.isChecked') })
  
  &lt;script type="text/x-handlebars" data-template-name="alerts"&gt;
                      {{#each itemController="alert"}}
                        &lt;li &gt;
                            {{name}}
                            {{input type="checkbox" checked=isCheckedBool class="toggle"}}
                        &lt;/li&gt;
                      {{/each}}
   &lt;/script&gt;
  </code></pre>