Question

I recently built a page based on Emberjs and twitter bootstrap. The page is dynamically built using the awesome emberjs bindings engine. I currently do have a controller from which a bounded view is rendering a list in html.

{{#each App.myArrayController}}
       {{#view App.MyItemListView contentBinding="this"}}
           <span>{{view.somethingToPrint}}</span>
       {{/view}}
{{/each}}

In that way, as you guess I’m printing N times the {{view.somethingToPrint}} array content within a span tag.

Now I’m considering rendering a list of jQuery UI slider. My question is, given they will be dynamically generated, when do I have to invoke the $(".slider").slider(); init method in order to make it “live”. Actually, what is the usual way of achieving this ?

I thought of using one the following:

• Using jQuery’s “livequery” plugin, to transparently init any added item. The drawback is that it is slow and may not work on every browsers.
• Embed a whole script tag at each row where I’m creating my slider, so that the script will be added too and the content inited.
• Add an observer on my App.myArrayController which will fire a $(".slider").slider(); if any change occur.

But still I’m not convinced of those. I’m used to work with twitter’s Bootstrap where in most of the case there is no need to mess with post render script invocation (this is right what a “bootstrap” is made for).

Answer 1

Here is an example, in order to not leave an unanswered question 😉

jsfiddle: http://jsfiddle.net/Sly7/bHL66/

javascript

App = Ember.Application.create();

App.myArrayController = Ember.ArrayController.create({
  content: [
    Ember.Object.create({firstName: "Gart", lastName: "Algar"}),
    Ember.Object.create({firstName: "Wayne", lastName: "Campbell"})
  ]
});

App.MyItemListView = Ember.View.extend({

  didInsertElement: function(){
    this.$().hide(); 
    this.$().fadeIn(1000);        
  },

  somethingToPrint: function(){
    return this.get('content.firstName') + ' ' + this.get('content.lastName');        
  }.property()
});