0

我正在尝试构建一个非常具体的模块，该模块集成了 Twitter bootstrap（用于选项卡）、jQuery（用于简化开发）和用于客户端视图模型的 knockout.js。这个想法是我有一个 HTML 页面，其中定义了 3 个 div。每个 div 都是一个选项卡，在特定时间只有一个 div 可见。当显示一个 div 时，它应该在一个作用域为选项卡的 knockout.js 视图模型上调用一个加载方法，并从服务器重新加载数据。

我编写了以下代码（有效），但是它非常特定于我的应用程序中的特定选项卡。

// 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 回答