Knockout&Typescript
我想实现的是:一个菜单栏,它将显示不同的div数据。Knockout&Typescript
我有什么:
<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等等。
对不起,不清楚。
最好有一个变量来保存基于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);
};
David Sherret,非常感谢,这正是我想要的。 – 2015-02-05 20:34:53
@ Daniel.Cristian太棒了。你应该能够接受这个例子,并根据你的具体情况进行工作。 – 2015-02-05 20:37:04
这就是我所做的,它很棒,作品很好,很流畅。再次感谢。我已经在这里查看并尝试了复杂的方法,并且提供了获奖行:'this.onTabClick =(item)=> {this.visibleTab(item.id);} }'和正确的html绑定。我是一个新手,但我已经喜欢这个......! – 2015-02-05 20:55:06
真的,@SamHolder?他显然1)对于SO是新的和2)不会说英语那么好。有更好的方式来帮助他,以更好地鼓励他进一步使用SO,而不是使用晦涩的评论。 – IronMan84 2015-02-05 19:15:09
此刻什么不起作用?它实际上做了什么,它与你试图达到的目标有什么不同? – 2015-02-05 20:12:54
谢谢! IronMan84,你是对的。我的第一个项目是淘汰赛,要求和打字稿。 – 2015-02-05 20:18:56