Giter Club home page Giter Club logo

ember-select-list's Introduction

ember-select-list

ember-select-list is a basic <select> component which strives to replace the old {{view 'select'}} while following the modern ember paradigm of "data-down-actions-up" as closely as possible.

Demo

http://begedin.github.io/ember-select-list

Installation

  • ember install ember-select-list

Using the addon

A straight replacement of the old select view would be done in the following way.

The following handlebars markup

{{view "select"
       content=programmers
       optionValuePath="content.id"
       optionLabelPath="content.firstName"
       value=selectedProgrammerId}}

can be replaced with

  {{select-list content=programmers
                optionValuePath='id'
                optionLabelPath='firstName'
                value=selectedProgrammerId
                action=(action (mut selectedProgrammerId))}}

As clear from the markup, the default behavior of the value binding is one way. In order to make it two-way, using the mut helper is required. Additionally, label and value paths do not require speficying the root element name.

Using attribute bindings

The following attribute bindings are supported: disabled, tabindex, required, title

Nesting is supported

The following syntax for label and value paths is supported and will work.

{{select-list content=myData
              optionValuePath='level1.level2.id'
              optionLabelPath='level1.level2.label'}}

Not specifying a value or label path will work

This will work

{{select-list content=myData
              optionLabelPath='level1.level2.label'}}

As will this

{{select-list content=myData
              optionValuePath='level1.level2.id'}}

The corresponding component property will simply be set to the value of the entire selected item in the content array.

You can use it with a collection of simple strings, or complex objects.

content can be int he format of ['Item A', 'Item B', ...] or [ ObjectA, ObjectB, ...].

Instead of using mut, you can bind it to any action you want

  {{select-list content=myData
                action='myCustomAction'}}

The action will be triggered when the selection is changed.

Ember support

This addon should currently work with [email protected]. It may also work with [email protected], but I haven't tested it. Official support for [email protected] is planned.

ember-select-list's People

Contributors

begedin avatar ember-tomster avatar ghedamat avatar nadavshatz avatar srsgores avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.