CODEWITHSUNDEEP
ember.js
Rudi
Rudi

Reputation: 1587

Ember custom checkbox

I'm using bootstrap-switch in order to change the look of my checkboxes.

That library basically wants the standard input tag surrounded with a div in order to do it's work:

<div class="switch">
    <input type="checkbox">
</div>

I made a custom view in Ember as below, which almost works! I'm missing the initial binding. Initially the switch is off, while the Ember model value is true (I still have regular checkbox to see what's going on). Once I turn my switch on, and it is in sync with the value I'm binding to, it works. I can then use the switch to toggle the value.

I'm wondering why my switch is always false to start with, instead of picking up the value it's bound to.

App.SwitchButton = Ember.View.extend({
  checked: true,
  attributeBindings: ['checked'],
  template: Ember.Handlebars.compile('<div class="switch switch-small"><input type="checkbox"></div>'),

  init: function() {
    'use strict';

    this._super();
    this.on('change', this, this.hasChanged);
  },

  didInsertElement: function() {
    'use strict';

    $('.switch').bootstrapSwitch({});
  },

  hasChanged: function() {
    'use strict';

    this.set('checked', this.$('INPUT[type=checkbox]').prop('checked'));
  }
});

Part of the template in which I use the switch:

{{#each issue in controller.issues}}
  <li>
    {{issue.datasetName}} <br>
    {{view Ember.Checkbox checkedBinding='issue.isActive'}}
    {{view Locationwise.SwitchButton checkedBinding='issue.isActive'}}
    <p></p>
  </li>
{{/each}}

Upvotes: 1

Views: 2206

Answers (1)

Mike Grassotti
Mike Grassotti

Reputation: 19050

The "checked" is initially set on the div, not on the input: . Don't know how to change it though.

By setting attributeBindings: ['checked'] on the view, ember is going to bind the value of the checked property to the view's div. In this case you need to instead bind the checked property to the tag. This can be done by using {{bindAttr}} in the view's template:

template: Ember.Handlebars.compile('<div class="switch switch-small"><input type="checkbox" {{bindAttr checked="view.checked"}}></div>')

Now the input tag's checked attribute will be bound to the view's checked property.

Upvotes: 2

Related Questions