What is Ember's magic concerning CheckBox indeterminate

@sukima wrote:

The <input type="checkbox"> has a neat indeterminate state which is documented on MDN (emphasis mine):

In addition to the checked and unchecked states, there is a third state a checkbox can be in: indeterminate . This is a state in which it’s impossible to say whether the item is toggled on or off. This is set using the HTMLInputElement object’s indeterminate property via JavaScript (it cannot be set using an HTML attribute)

I noticed today that the following template works in Ember despite documentation to the contrary:

<input type="checkbox" indeterminate={{this.isIndeterminate}}>

How is this working? What magic is allowing this property to work outside of JavaScript?

For comparison I wrote a JS only Ember component to handle this situation but it seems it is not needed?

import Component from '@ember/component';
import { computed } from '@ember/object';

export const STATES = Object.freeze({
  NONE: 'none',
  SOME: 'some',
  ALL: 'all'
});

export default Component.extend({
  tagName: 'input',
  attributeBindings: ['type'],
  type: 'checkbox',
  
  isChecked: computed('checked', function() {
    return this.checked !== STATES.NONE ? !!this.checked : false;
  }),
  
  isIndeterminate: computed('checked', function() {
    return this.checked === STATES.SOME;
  }),
  
  updateElementState() {
    this.element.checked = this.isChecked;
    this.element.indeterminate = this.isIndeterminate;
  },
  
  // didReceiveAttrs is called before didInsertElement
  // and does not have a this.element yet.

  didInsertElement() {
    this._super(...arguments);
    this.updateElementState();
  },
  
  didUpdateAttrs() {
    this._super(...arguments);
    this.updateElementState();
  },
  
  click() {
    if (this.onClick) this.onClick();
  }
});

Posts: 1

Participants: 1

Read full topic