ember-one-way-input

ember-one-way-input

Credit: @rwjblue's twiddle

Demo: http://ember-twiddle.com/2d7246875098d0dbb4a4

This addon provides a simple one way input that sends an update action when it is updated, and can be used like any other input.

  {{one-way-input
      value=currentValue
      update=(action (mut currentValue))
      onenter=(action "commit")
      onescape=(action "escape")
  }}

The input can also be used as a checkbox:

  {{one-way-input
      type="checkbox"
      checked=currentValue
      update=(action (mut currentValue))
  }}

The component's KEY_EVENTS attribute can be overwritten to provide custom handlers for various keycodes on the keyUp event.

KEY_EVENTS: {
  '13': 'onenter',
  '27': 'onescape'
}

This means that the onenter and onescape actions will fire if their corresponding key codes are received in the keyUp event.

Why?

With Glimmer landing in 1.13.x, native <input> elements can now be used in your apps, without the two way binding semantics of the {{input}} helper. Shifting to one way bindings ("data down, actions up") makes your app easier to reason about and debug, and is generally the idiomatic way of building Ember apps going forward.

Unfortunately, there is a small gotcha with using a native input like so:

<input
  value={{currentValue}}
  oninput={{action (mut currentValue) value="target.value"}}
>

In the following demo, move your cursor to a character in the middle of the value, and attempt to input new text. You will notice that your cursor immediately jumps to the end of the string, which is entirely unintuitive and annoying.

This addon fixes the cursor jumping issue by using readDOMAttr, which provides a way to read an element's attribute and update the last value Ember knows about at the same time. This makes setting an attribute idempotent.

Compatibility

This addon will work on Ember versions 1.13.x and up.

Installation

• git clone this repository
• npm install
• bower install

Running

• ember server
• Visit your app at http://localhost:4200.

Running Tests

• ember test
• ember test --server

Building

• ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.

Legal

DockYard, Inc © 2015

@dockyard

Licensed under the MIT license