淘汰赛和打字稿

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 显示 div 1 时，当我单击按钮 2 显示 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>

然后在 ViewModel 中：

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

淘汰赛和打字稿

Knockout & Typescript

knockout.js

typescript