Handling visual elements with Ember.js

Question

I'm exploring mobile frameworks and I've come across Ember.js. I love the MVC model, but I'm curious how visual elements are usually handled. With jQuery Mobile, for example, you can easily create mobile-optimized form elements (buttons, sliders, toggle switches, etc.). You can also handle page transitions. These types of visual elements seem to be outside of the scope of Ember.js.

Would most people use Ember.js in conjunction with another framework (like jQuery Mobile) that handles the visual elements?

Answer 1

Ember uses jQuery internally and tends to work well with jQueryUI widgets. The main issues people run into is the dynamic nature of how ember renders views and jQueryUI widgets losing event handlers (which is usually easy to solve).

Ideally you would create custom views for things like sliders using the Ember view layer and those custom views could wrap external widgets if needed.

https://github.com/flamejs/flame.js

FlameJS is also an interesting project which provides a lot of what you are asking about.

Answer 2

You can easily integrate jQuery based plugins and frameworks with Ember using the didInsertElement function inherited from the Ember.View class. A simple example would be to make a date picker:

App.DatePicker = Em.TextField.extend({
    didInsertElement: function() {
        this.$().datepicker();
    }
});

In this example, this.$() is the Ember short hand for $(this.element) and creates the date picker after the text input is inserted into the dom. You can use Ember's built in observers and property bindings to handle changes.

jQueryMobile specifically requires some configuration to allow Ember to control the routing and links. A good sample of this is https://github.com/LuisSala/emberjs-jqm.