使用 Knockout JS 绑定 JQuery 选项卡答案

【问题标题】：Binding JQuery Tabs Using Knockout JS使用 Knockout JS 绑定 JQuery 选项卡
【发布时间】：2015-01-01 14:39:55
【问题描述】：

我有这样的 ViewModel：

function ViewModel() {
        var self = this;
        self.Tab = function (id, name, text, selected) {
            var tab = this;
            tab.id = ko.observable(id);
            tab.name = ko.observable(name);
            tab.text = ko.observable(text);
            return tab;
        };
        self.selectedTab = ko.observable(1);
        self.tabs = new Array();
        self.tabs.push(new self.Tab(1, 'Tab 1', 'Tab 1 Content'));
        self.tabs.push(new self.Tab(2, 'Tab 2', 'Tab 2 Content'));
        self.tabs.push(new self.Tab(3, 'Tab 3', 'Tab 3 Content'));
        self.tabs.push(new self.Tab(4, 'Tab 4', 'Tab 4 Content'));
        return self;
    }
    ko.applyBindings(new ViewModel(), document.getElementById("TabDiv"));

以及相关的HTML如下：

  <div id="TabDiv">
            <div id="tabs" data-bind="foreach: tabs">
                <div class="tab" data-bind="css: {selected: $parent.selectedTab() == id()}, text:     name, click: $parent.selectedTab.bind($parent, id())">
                </div>
            </div>
            <div id="tabContent" data-bind="foreach: tabs">
                <div data-bind="if: $parent.selectedTab() == id()">
                    <span data-bind="text: text"></span>
                </div>
            </div>
   </div>

现在，我有另一个 ViewModel 如下：

var ProjectViewModel = {
 ........
 AddEmployee: function (data, event) {
     $('.chkList').each(function () {
         //Here i want to generate tab
     });
 }
};

复选框列表绑定到 ProjectViewModel 的可观察数组之一，这一切正常。我想要做的是，单击复选框列表中的复选框，生成一个选项卡（类似于 Jquery UI 选项卡）。

您可以看到 4 个静态插入的选项卡值，效果很好。我按预期得到标签。但是我无法将我在 ProjectViewModel 的 AddEmployee 函数中获得的值推送到 ViewModel 中的选项卡数组中。我不知道如何处理 self.tabs.push(new self.Tab(.....));在 ViewModel 之外。

非常感谢任何帮助。

【问题讨论】：

标签： jquery-ui knockout.js

【解决方案1】：

您可以使用ko.dataFor() 访问视图模型：

AddEmployee: function (data, event) {
     var vm = ko.dataFor(document.getElementById("TabDiv"));

     vm.tabs.push(new vm.Tab(5, 'New Tab', 'New Tab Content'));
 }

或者，您可以将视图模型公开到全局范围，然后在任何地方访问它：

window.tabsVM = new ViewModel();

ko.applyBindings(window.tabsVM, document.getElementById("TabDiv"));

然后：

AddEmployee: function (data, event) {
     var vm = window.tabsVM;

     vm.tabs.push(new vm.Tab(5, 'New Tab', 'New Tab Content'));
}

此外，如果您希望更改自动更新 DOM，则必须将 tabs 数组更改为可观察数组：

self.tabs = ko.observableArray();

【讨论】：