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