綁定JQuery的標籤使用淘汰賽JS

Question

我視圖模型是這樣的：

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> 

現在，我還有一個視圖模型如下：

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

複選框列表綁定到ProjectViewModel的一個可觀察數組中，這一切都正常工作。我想要做的是，點擊複選框列表中的複選框，生成一個Tab（類似於Jquery UI Tab）。

您可以看到靜態插入的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')); 
} 

而且，你必須改變你的tabs數組一個可觀察陣列，如果您想要更改以自動更新DOM：

self.tabs = ko.observableArray();