Question

I have an Emberjs / jQuery Mobile app and I’m trying to use a Select Widget.

http://jquerymobile.com/demos/1.1.1/docs/forms/switch/index.html

The jsFiddle has html enhanced by jQuery Mobile and Ember generated markup which has failed to be enhanced.

http://jsfiddle.net/mattkime/7qAef/

Why isn’t the ember markup jQM-ified?

Answer 1

While jQm styles your page, this select element is not yet in the page.

You can create a view for your template, and then make jQm theme your element on didInsertElement of the view.

<script type="text/x-handlebars" data-template-name="laa-laa">
<div data-role="fieldcontain">
    <label for="emberEnhanced">Ember Enhanced</label>
    {{view Em.Select
        contentBinding="App.booleanOptions"
        selectionBinding="App.power"
        optionLabelPath="content.label"
        optionValuePath="content.value"
        id="emberEnhanced"
      }}
    <hr/>
    Ember Enhanced Value:{{App.power.value}}
</div>
</script>
<script type="text/x-handlebars">
    {{view App.LaaLaa}}
</script>

---

App.LaaLaa = Em.View.extend({
    templateName : "laa-laa",
    didInsertElement:function(){
      this.$().trigger('create'); //for jQm to retheme element
      }
});

here is a fiddle: http://jsfiddle.net/7qAef/3/