Skip to content

Commit

Permalink
Update readme examples for contextual components.
Browse files Browse the repository at this point in the history
  • Loading branch information
Robdel12 committed Sep 2, 2016
1 parent c998182 commit e7ca1ea
Showing 1 changed file with 15 additions and 43 deletions.
58 changes: 15 additions & 43 deletions README.md
Original file line number Diff line number Diff line change
@@ -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)
Expand Down Expand Up @@ -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}}
```

Expand All @@ -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|}}
Expand All @@ -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
Expand All @@ -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:
Expand Down

0 comments on commit e7ca1ea

Please sign in to comment.