Knockout＆Typescript

Question

我想實現的是：一個菜單欄，它將顯示不同的div數據。

我有什麼：

<table> 
    <tr> 
     <td data-bind="foreach: menuItems"> 
      <button data-bind="text: name, click: navigate" class="buttonTD"></button> 
     </td> 
    </tr> 
</table> 
<div id='1'></div> 
<div id='2'></div> 

視圖模型：

this._tabs = ko.observableArray([ 
      { id: '1', name: "Compliance", navigate: 'tab2Visible: ko.observable(false)', style: 'active' }, 
      { id: '2', name: "ITC ", navigate: 'tab3Visible: ko.observable(false)', style: 'inactive' }, 
      { id: '3', name: "Check", navigate: 'tab4Visible: ko.observable(false)', style: 'inactive' }, 
      { id: '4', name: "Check Champion", navigate: 'tab5Visible: ko.observable(false)', style: 'inactive' }, 
      { id: '5', name: "Tech", navigate: 'tab6Visible: ko.observable(false)', style: 'inactive' }, 
      { id: '6', name: "Comm", navigate: 'tab7Visible: ko.observable(false)', style: 'inactive' }, 
      { id: '7', name: "Order", navigate: 'tab8Visible: ko.observable(false)', style: 'inactive' }, 
      { id: '8', name: "Order Rejected", navigate: 'tab9Visible: ko.observable(false)', style: 'inactive' }, 
      { id: '9', name: "Cancel", navigate: 'tab10Visible: ko.observable(false)', style: 'inactive' } 
     ]); 
this.menuItems = this._tabs; 

豈是數組改變，當我點擊按鈕1，以顯示我的股利1，當我點擊button2向我顯示div3等等。

對不起，不清楚。

Answer 1

最好有一個變量來保存基於id的當前選項卡。更新和跟蹤多個bool變量會使代碼難以維護。另外，您需要創建一個不是字符串的點擊事件。

你可能想是這樣的：在視圖模型

<table> 
    <tr> 
     <td data-bind="foreach: menuItems"> 
      <button data-bind="text: name, click: $parent.onTabClick" class="buttonTD"></button> 
     </td> 
    </tr> 
</table> 
<div data-bind="visible: visibleTab() == 1">Tab 1</div> 
<div data-bind="visible: visibleTab() == 2">Tab 2</div> 
<!-- etc... --> 
<div data-bind="visible: visibleTab() == 9">Tab 9</div> 

然後：

this.visibleTab = ko.observable(1); 
this.menuItems = ko.observableArray([ 
     { id: '1', name: "Compliance", style: 'active' }, 
     { id: '2', name: "ITC ", style: 'inactive' }, 
     { id: '3', name: "Check", style: 'inactive' }, 
     { id: '4', name: "Check Champion", style: 'inactive' }, 
     { id: '5', name: "Tech", style: 'inactive' }, 
     { id: '6', name: "Comm", style: 'inactive' }, 
     { id: '7', name: "Order", style: 'inactive' }, 
     { id: '8', name: "Order Rejected", style: 'inactive' }, 
     { id: '9', name: "Cancel", style: 'inactive' } 
    ]); 

this.onTabClick = (item) => { 
    this.visibleTab(item.id); 
}; 

JSFiddle