在ember复选框中绑定模型和视图

Question

不明白哪种语法绑定了我的模型和复选框视图。

我的问题是：Ember在复选框中使用true / false值，但在我的模型字段中包含1或0。 告诉我正确的方式plz

示例index.htlml：

      <script type="text/x-handlebars" id="alerts">
        <div class="container main_container">

            <div id="metrics_main">
                <div id="legend">
                    <span id="legend_name">metric name</span>
                    <span id="legend_coefficient">anomalous datapoint</span>
                </div>


                <div id="metrics_listings">
                  <table width="100%">
                    {{#each alert in controller}}
                      {{view view.TableRowView}}
                    {{else}}
                    <li>no alerts/// :(</li>
                    {{/each}}
                  </table>
                </div>
            </div>
        </div>
  </script>

  <script type="text/x-handlebars" data-template-name="alert-row" id="alert">
    <tr class="sub selected">

    <td width="60%">
       {{alert.name}}
     </td>
    <td >
       checked: {{alert.isChecked}}
       {{view Ember.Checkbox checkedBinding="alert.isChecked"}}
     </td>
     <td >
      active: {{alert.isActive}}
     </td>
     <td >
      {{alert.value}}
     </td>
    </tr>
  </script>

和app.js：

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

});

我通过扩展Ember.Checkbox解决了这个问题，但我认为还有另一种方法：

Ember.CheckboxInt = Ember.Checkbox.extend({

  attributeBindings: ['checkedInt' ],

  checkedInt: 0,

  init: function() {
    this._super();
    if(this.checkedInt > 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"}}

更新

Todo示例中的“烬道”（http://emberjs.com/guides/getting-started/marking-a-model-as-complete-incomplete/）

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') > 0;
    } else {
      // property being used as  setter
      model.set('isChecked', value == true ? 1 : 0);
      model.save();
      return model;
    }
  }.property('model.isChecked') })

<script type="text/x-handlebars" data-template-name="alerts">
                    {{#each itemController="alert"}}
                      <li >
                          {{name}}
                          {{input type="checkbox" checked=isCheckedBool class="toggle"}}
                      </li>
                    {{/each}}
 </script>