Ember jQuery Mobile

This addon appears as a solution for working with jQuery Mobile on an Ember CLI application (Ember.js 2.x)

The addon is actually working with:

• Ember 2.2.0
• jQuery Mobile 1.4.5

The basis of this addon is to wrap each one of the jQuery Mobile widgets in an Ember.js component.

These components can be used on any handlebars template as you normally do.

To see actual component list, please go to implemented components

Please note this is an Ember CLI addon not an standalone Ember.js app. Here, you can see a working example

Implemented Components

This is the list of the available jQuery Mobile widgets (Ember.js Components) for now:

• jqm-page: main component, wraps a jQuery Mobile page. You should use this on each main template controller (for now). See pages
• jqm-header: wraps jQuery Mobile header, for jqm-pages. See toolbar
• jqm-footer: wraps jQuery Mobile footer, for jqm-pages. See toolbar
• jqm-panel: wraps jQuery Mobile side panel, special behavior look at the bottom of this list to get more information see panel
• jqm-popup: wraps jQuery Mobile modal popup, special behavior look at the bottom of this list to get more information see popup
• jqm-anchor: wraps jQuery Mobile anchor (link). See button-markup
• jqm-button: wraps jQuery Mobile button. See button-markup
• jqm-textinput: wraps jQuery Mobile normal Text Input. This lets you create text inputs, for more see textinput CAUTION! Do not use this to generate a text area, instead use jqm-textarea. Extends Ember.TextField
• jqm-checkbox: wraps jQuery Mobile Checkbox widget. This lets you create checkboxes, for more see checkbox
• jqm-radiobutton: wraps jQuery Mobile Radio widget. This lets you create radio buttons, for more see radio
• jqm-fileinput: wraps jQuery Mobile file Input. This lets you obtain files from the user computer for more see textinput. Extends jqm-textinput
• jqm-textarea: wraps jQuery Mobile text area (Text Input). See textinput. This extends Ember.TextArea, this is why both input components are detached
• jqm-slider: wraps jQuery Mobile Slider component, it maintains its special properties and behavior, see slider. Also extends Ember.TextInput
• jqm-select: wraps jQuery Mobile select menu. See selectmenu
• jqm-datepicker: wraps jQuery Mobile datepicker, this is a 3rd party component please check datepicker
• jqm-ulistview: unordered list view, wraps jQuery Mobile list view <ul> element. See listview
• jqm-olistview: ordered list view, wraps jQuery Mobile list view <ol> element. See listview
• jqm-listdivider: wraps jQuery Mobile list divider <li data-role="listdivider"> element. See listview
• jqm-listitem: wraps jQuery Mobile list item widget <li data-icon="icon"> element, best way to change the default <li> icon, for the other cases <li> element it's ok. See listview
• jqm-collapsible: wraps jQuery Mobile collapsible widget . See collapsible
• jqm-collapsibleset: wraps jQuery Mobile collapsible (set) widget . See collapsible (set)

More components will be implemented, if you want to help with this please see contributing

For more info about how to use these handlebars components please check the wiki pages Not done yet see the working example instead

For users

Installation

Please make sure that you have Ember CLI installed

If not done yet, create a new project

ember new <app-name>

Then you can install the addon

ember install ember-jquery-mobile

NOTE: There's actually a jQuery dependency incoherency between Ember.Js and jQuery Mobile, you can execute `bower install --force-latest as for now jQuery 2.1.x is working fine with both (this will remove old browsers support1)

Now you can start adding jQuery Mobile components to your handlebars templates2

For developers

Installation

• git clone this repository
• npm install
• bower install --force-latest

Running

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

Running Tests

• ember test
• ember test --server

Building

• ember build

Issues

Feel free to submit issues and enhancement requests.

Contributing

Want to help? Please check contributing

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