From e7ca1eafe70e214b0f176841f2a43f20eac15343 Mon Sep 17 00:00:00 2001
From: robdel12 <robertdeluca19@gmail.com>
Date: Thu, 1 Sep 2016 22:55:25 -0500
Subject: [PATCH] Update readme examples for contextual components.

---
 README.md | 58 ++++++++++++++-----------------------------------------
 1 file changed, 15 insertions(+), 43 deletions(-)

diff --git a/README.md b/README.md
index 737537f..063bcf5 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
 # emberx-select
-
+[![Ember Badge](https://embadge.io/b/7.svg)](https://embadge.io/badges/7)
 [![npm version](https://badge.fury.io/js/emberx-select.svg)](http://badge.fury.io/js/emberx-select)
 [![Ember Observer Score](http://emberobserver.com/badges/emberx-select.svg)](http://emberobserver.com/addons/emberx-select)
 [![Build Status](https://travis-ci.org/thefrontside/emberx-select.svg?branch=master)](https://travis-ci.org/thefrontside/emberx-select)
@@ -33,9 +33,9 @@ and binding aware. It is used in conjuction with the `x-option`
 component to construct select boxes. E.g.
 
 ```handlebars
-{{#x-select value=bob action="selectPerson"}}
-  {{#x-option value=fred}}Fred Flintstone{{/x-option}}
-  {{#x-option value=bob}}Bob Newhart{{/x-option}}
+{{#x-select value=bob action="selectPerson" as |xs|}}
+  {{#xs.option value=fred}}Fred Flintstone{{/xs.option}}
+  {{#xs.option value=bob}}Bob Newhart{{/xs.option}}
 {{/x-select}}
 ```
 
@@ -45,24 +45,14 @@ the options are always up to date, so that when the object bound to
 Whenever the select tag receives a change event, it will fire
 `action`.
 
-If you're just changing a model's property, you don't need `action`. For example,
-if you have a model with a `status` field with an integer, you can do this:
-
-```handlebars
-{{#x-select value=model.status }}
-  {{#x-option value=1}}Active{{/x-option}}
-  {{#x-option value=2}}Inactive{{/x-option}}
-{{/x-select}}
-```
 
 ### Contextual Components
 
-As of version 2.1.0, `emberx-select` takes advantage of Ember's
-[contextual components](http://emberjs.com/blog/2016/01/15/ember-2-3-released.html#toc_contextual-components)
-feature. Using contextual components allows `emberx-select` to skip some
-potentially expensive DOM traversals. This feature works with **Ember
-2.3.0 and above!** If you're using such a version, we highly recommend
-you use it:
+As of version 3.0.0, `emberx-select` will only support contextual
+components. This means you will have to use Ember 2.3 or higher. Using
+contextual components allows `emberx-select` to skip some
+potentially expensive DOM traversals. Now the options can register
+through data rather than through the DOM.
 
 ```handlebars
 {{#x-select value=model.status as |xs|}}
@@ -81,33 +71,15 @@ option. This means you can pass an array as its value, and it will set
 its selections directly on that array.
 
 ```handlebars
-{{#x-select value=selections multiple=true action="selectionsChanged"}}
- {{#x-option value=fred}}Fred Flintstone{{/x-option}}
- {{#x-option value=bob}}Bob Newhart{{/x-option}}
- {{#x-option value=andrew}}Andrew WK{{/x-option}}
+{{#x-select value=selections multiple=true action="selectionsChanged" as |xs|}}
+ {{#xs.option value=fred}}Fred Flintstone{{/xs.option}}
+ {{#xs.option value=bob}}Bob Newhart{{/xs.option}}
+ {{#xs.option value=andrew}}Andrew WK{{/xs.option}}
 {{/x-select}}
 ```
 
 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
-`one-way` and set it to `true`. This will disable two way data binding.
-
-```hbs
-{{#x-select value=willNotChangeOnSelection one-way=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
-`one-way=true` it would change the value.
-
 ## Action and Action Arguments
 
 The action that is dispatched by x-select whenever the selected value or values
@@ -129,9 +101,9 @@ cases, you can associate arbitrary attributes with the component
 itself and use them later inside your action handler.  For example:
 
 ```handlebars
-{{#x-select action="didMakeSelection" default=anything}}
+{{#x-select action="didMakeSelection" default=anything as |xs|}}
   <option>Nothing</option>
-  {{#x-option value=something}}Something{{/x-option}}
+  {{#xs.option value=something}}Something{{/xs.option}}
 {{/x-select}}
 ```
 then, inside your action handler: