jQueryとknockout.jsのためのJavaScriptコードGenerifyingは、再利用可能なモジュールであることを

Question

私はクライアント - のための非常に特定の（タブの）Twitterのブートストラップを統合モジュール、（開発を容易にするため）、jQueryとknockout.jsを構築しようとしていますサイドビューモデル。アイデアは、3つのdivが定義された1つのHTMLページがあるということです。各divはタブで、特定の時刻に1つのdivしか表示されません。 divが表示されたら、knockout.jsビューモデルのloadメソッドを呼び出し、タブにスコープを設定し、サーバーからデータをリロードする必要があります。私は（作品）次のコードを書かれている

は、しかし、それは私のアプリケーションで特定のタブに非常に具体的です。

// only configure this once the DOM is ready for processing. 
// this code snippet is very long winded and quite a hack, however it allows the content of a bootstrap.js 
// tab to be reloaded when the tab is made visible. It does this by calling the LoadCategory() method on the 
// knockout.js view model. 
// 
// it is also worth noting that the view model is bound using knockout to only descendents of the div that contains 
// the tab contents. This is to ensure that we can have several knockout view models in one page without needing to 
// worry about them interfering with each other. 
$(document).ready(function() { 
    // initialise the model... 
    var todaysQuestionsModel = new ViewModel(categoryId); 

    // if this tab is visible to begin with, load the view model. 
    if ($('#todays-questions').hasClass('active')) { 
     todaysQuestionsModel.LoadCategory(); 
    } 

    // only apply these bindings to the elements that descend from the div that contains this tab. 
    ko.applyBindings(todaysQuestionsModel, document.getElementById("#todays-questions")); 

    $('a[data-toggle="tab"]').on('shown', function (e) { 
     if (e.target.hash == '#todays-questions') { 
      todaysQuestionsModel.LoadCategory(); 
     } 
    }); 
}); 

私は、しかし、私はこのコードをgenerifyする方法についての損失で午前、私は自分のアプリケーションのさまざまな部分のために再利用できるJavaScriptのモジュールでこれを包んでできるようにしたいと思います。理想的には、この動作のすべてを自動的に設定する単純な関数呼び出しを行うことができるようにしたいと考えています。

私はtodaysQuestionsModel.LoadCategory（）呼び出しが、これは、コールバック関数であるべきと判断された部分は想定しています。私はまた、私はidセレクタを指定する必要はありませんいくつかの方法があるはずだと仮定しますが、私がこれまで行っているすべての試みは動作していないようです。

誰かが私はかなりここに:-)私の深さのうちだ、これで私を助けることができます。

乾杯、

エイダン

Answer 1

私はノックアウトでイベント処理を使用します。 これは変更されたサンプルコードです：http://jsfiddle.net/xVxKD/52/

<div class="tabbable"> 
     <ul class="nav nav-tabs" data-bind="foreach: tabs"> 
     <li data-bind="css: { active: $root.selected() === $data }"> 
      <a href="#" data-bind="click: $root.doSomething, text: title"></a> 
     </li> 
     </ul> 
     <div class="tab-content" data-bind="foreach: tabs"> 
     <div class="tab-pane" data-bind="css: { active: $root.selected() === $data }"> 
      <p data-bind="text: content"></p> 
     </div> 
     </div> 
    </div>​ 


<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){ 
function Tab(id, title, content) { 
    this.id = ko.observable(id); 
    this.title = ko.observable(title); 
    this.content = ko.observable(content); 
} 

var viewModel = { 
    tabs: ko.observableArray([ 
     new Tab(1, "one", "one content"), 
     new Tab(2, "two", "two content"), 
     new Tab(3, "three", "three content") 
    ]), 
    selected: ko.observable(),   

    doSomething: function($data, $event){ 
     //alert(' = '+$event.target.hash) 
     $data.content($data.content() + '\n Do i need to fetch new content for you?') 
     viewModel.selected($data); 
    } 

}; 

//select second tab by default 
viewModel.selected(viewModel.tabs()[1]); 

ko.applyBindings(viewModel); 
});//]]> 

</script>