2

bootstrap-tour** https://github.com/pushly/bootstrap-tourをemberjsで使用する方法がわかりません。Bootstrap-tourのドキュメント** http://pushly.github.com/bootstrap-tour/

課題は、次のようにして統合できる他のjqueryプラグインとは異なります。

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

Bootstrap-tourを使用するには別のパターンが必要ですが、これまでのところ、emberjsと統合するために試したすべてのパターンが機能しませんでした。

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();

  }
});

それは機能せず、これも機能しませんでした：

 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();

});

最後に、このemberjsとbootstrap-tourのjsfiddleも機能しませんでした。

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

しかし、これはemberjsなしで機能します。

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

アップデート

このjsfilddle** http: //jsfiddle.net/GqG3U/6/ はエラーをスローしませんが、スクリプトタグを使用するとハンドルバーが表示されません。ただし、scriptタグがないと、表示されます。

4

2 に答える 2

2

動作するバージョンを追加しました。

あなたはそこでコードにかなり近づいていて、ツアー変数を適切に割り当てていなかっただけで、アプリをインスタンス化する必要がありました。

Emberの最新バージョンは、とを使用してアプリケーションをセットアップし、を呼び出すApplicationViewと、実際に最適に機能します。これはjsFiddlesにとって少し厄介なことですが、そうでなければ奇妙なバグにつながる可能性があります。ApplicationControllerinitialize

于 2012-09-09T13:01:02.117 に答える
1

私はあなたのコードをリファクタリングしようとしました、今それはよりきれいです（また働きます）：

http://jsfiddle.net/GqG3U/14/

HTMLをハンドルバーに配置するスクリプトブロックは「EmberWay」です:)

PS：Chromeでは、ツアーを「this.tour.start（true）;」と呼ぶ必要があります。

于 2012-09-09T13:19:26.933 に答える