Question

我有这样的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中的tabs数组中。我不知道如何处理self.tabs.push（new self.Tab（.....））;在ViewModel之外。

非常感谢任何帮助。

Answer 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数组更改为observable-array：

self.tabs = ko.observableArray();

使用Knockout JS绑定JQuery选项卡

1 个答案: