Add the ability to disable two way data binding

README.md

@@ -6,8 +6,8 @@
 
 A Select component based on the native html select.
 
-We've tried other select components, and were missing the reliability, 
-maintainability, and accessbility of the native html `<select>`. 
+We've tried other select components, and were missing the reliability,
+maintainability, and accessbility of the native html `<select>`.
 `<x-select>` is a drop-in component to let you use any
 object for your selectable options. You can use it out of the box, or
 as a building block of something more ambitious.
@@ -90,6 +90,23 @@ its selections directly on that array.
 
 The selections array will be initialized to an empty array if not present.
 
+## Disabling two way data binding
+
+In x-select v2.2.0 we introduced a way to disable two way data
+binding, which is enabled by default. If you would like to only mutate
+the value of x-select through actions you can pass an attribute called
+`oneWay` and set it to `true`. This will disable two way data binding.
+
+```hbs
+{{#x-select value=willNotChangeOnSelection oneWay=true}}
+  {{#x-option value="hello" selected=true}}Hello{{/x-option}}
+  {{#x-option value="world"}}World{{/x-option}}
+{{/x-select}}
+```
+
+If you select the `World` option in the example above, it will not
+change the value (`willNotChangeOnSelection`) to `world`. Without
+`oneWay=true` it would change the value.
 
 ## Action and Action Arguments
 

addon/components/x-select.js

@@ -53,6 +53,17 @@ export default Ember.Component.extend({
    */
   tabindex: 0,
 
+  /**
+   * Determies if one way data binding is enabled. If set to true the
+   * value of x-select will not be updated when changing options, you
+   * would need to do mutate the value through an action.
+   *
+   * @property oneWay
+   * @type Boolean
+   * @ default false
+   */
+  oneWay: false,
+
   /**
    * The collection of options for this select box. When options are
    * inserted into the dom, they will register themselves with their
@@ -71,7 +82,10 @@ export default Ember.Component.extend({
    * component's action with the current value.
    */
   change(event) {
-    this._updateValue();
+
+    if(!this.get('oneWay')) {
+      this._updateValue();
+    }
 
     this.sendAction('action', this.get('value'), this);
     this.sendAction('onchange', this, this.get('value'), event);
@@ -142,7 +156,7 @@ export default Ember.Component.extend({
     if (this.isDestroying || this.isDestroyed) {
       return;
     }
-    
+
     if (this.get('multiple')) {
       this._updateValueMultiple();
     } else {

tests/integration/components/two-way-data-binding-test.js

@@ -0,0 +1,35 @@
+/* jshint expr:true */
+import { expect } from 'chai';
+import { describeComponent, it } from 'ember-mocha';
+import { describe, beforeEach } from 'mocha';
+import hbs from 'htmlbars-inline-precompile';
+
+describeComponent(
+  'two-way-data-binding',
+  'Integration: XSelectTwoWayDataBinding',
+  {
+    integration: true
+  },
+  function() {
+    describe("changing the selection with two way data binding disabled", function() {
+      beforeEach(function() {
+        this.set('make', 'ford');
+        this.render(hbs`
+          {{#x-select value=make oneWay=true}}
+            {{#x-option value="ford"}}Ford{{/x-option}}
+            {{#x-option value="chevy"}}Chevy{{/x-option}}
+            {{#x-option value="dodge" class="spec-dodge-option"}}Dodge{{/x-option}}
+          {{/x-select}}
+        `);
+      });
+
+      beforeEach(function() {
+        this.$('.spec-dodge-option').prop('selected', true).trigger('change');
+      });
+
+      it("doesn't mutate the value", function() {
+        expect(this.get('make')).to.equal("ford");
+      });
+    });
+  }
+);