0

私は、Twitterブートストラップ（タブ用）、jQuery（開発を容易にするため）、およびクライアント側ビューモデル用のknockout.jsを統合する非常に特殊なモジュールを構築しようとしています。アイデアは、3つのdivが定義されている1つのHTMLページがあるということです。各divはタブであり、特定の時間に表示されるdivは1つだけです。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();
        }
    });
});

これをJavaScriptモジュールにまとめて、アプリケーションのさまざまな部分で再利用できるようにしたいと思いますが、このコードを生成する方法がわかりません。理想的には、単純な関数呼び出しを行うだけで、この動作をすべて自動的に構成できるようにしたいと思います。

todaysQuestionsModel.LoadCategory（）呼び出しが行われる部分では、これはコールバック関数である必要があると想定しています。また、idセレクターを指定する必要がない方法があるはずですが、これまでに行った試みはうまくいかないようです。

誰かがこれで私を助けることができます、私はここで私の深さからかなり外れています:-)。

乾杯、

エイダン

4

1 に答える 1

2

ノックアウトによるイベント処理を使用します。これは変更されたサンプルコードです：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>
于 2012-04-28T15:06:19.273 に答える