Question

I am not sure on how to use bootstrap-tour ** https://github.com/pushly/bootstrap-tour with emberjs. Bootstrap-tour’s documentation ** http://pushly.github.com/bootstrap-tour/

The challenge is that unlike other jquery plugin that we can integrate by doing:

didInsertElement: function() {
  this.$().jQueryPlugin();
}

Bootstrap-tour requires a different pattern to use and so far, everything i have tried in order to integrate it with emberjs has failed to work:

App.SiteTour = Ember.View.extend({
  templateName: 'whatever',

  didInsertElement: function(){
    this._super(),

    //var tour = new Tour();

      this.tour = new Tour();

    tour.addStep:({
      element: "#one",
      title: "Step 1",
      content: ' '
    });

    tour.addStep:({
      element: "#two",
      title: "Step 2",
      content: ' '
    });

    tour.start();

  }
});

That didn’t work and this didn’t work either:

 this.$().load({

    tour.addStep({
     element: "#one",
     title: "Step 1",
     content: "Content for step 1"
   });

  tour.addStep({
     element: "#two",
     title: "Step 2",
     content: "Content for step 2"
   });

 },


   tour.start();

});

Finally this jsfiddle of emberjs and bootstrap-tour also failed to work:

http://jsfiddle.net/GqG3U/5/

But this one without emberjs works:

http://jsfiddle.net/GqG3U/4/

Update

This jsfilddle ** http://jsfiddle.net/GqG3U/6/ does not throw any error but the handlebars will not display when i use the script tags. However, without the script tag, it displays.

Answer 1

I’ve added a working version .

You were pretty close with your code there, you were just not quite assigning the tour variable properly and needed to instantiate the app.

The latest version of Ember really works best if you set up your application with an ApplicationView and ApplicationController, and call initialize. I know this is a little awkward for jsFiddles but it can lead to weird bugs otherwise.