我有一个asp.net mvc2页面,我使用knockout显示带有标题和描述的数据。我想隐藏描述并根据点击的标题显示描述。任何帮助,将不胜感激。另外我想将h1标签应用于标题。
<div id="dataDiv">
<table style="text-align: left" border="0">
<tbody>
<!-- ko foreach: list -->
<tr>
<td colspan="2" data-bind="text: title">
</td>
</tr>
<tr>
<td colspan="2" data-bind="text: description">
</td>
</tr>
<tr>
<td colspan="2">
<hr style="border-top: 1px dotted #f00; color: #fff; background-color: #fff; height: 1px;
width: 100%;" />
</td>
</tr>
<!-- /ko -->
</tbody>
</table>
答案 0 :(得分:1)
这是你在找什么?
工作演示http://jsfiddle.net/Rgxy9/
HTML:
<table style="text-align: left" border="0">
<tbody data-bind="foreach: list">
<tr>
<td colspan="2" data-bind="click: $root.select">
<h1 data-bind="text: title" />
</td>
</tr>
<tr data-bind="visible: $root.selected() == $data">
<td colspan="2" data-bind="text: description">
</td>
</tr>
<tr>
<td colspan="2">
<hr style="border-top: 1px dotted #f00; color: #fff; background-color: #fff; height: 1px;
width: 100%;" />
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var item = function(title, desc) {
this.title = ko.observable(title);
this.description = ko.observable(desc);
};
var vm = function() {
var self = this;
this.list = ko.observableArray([new item('some', 'desc'),
new item('som2', 'desc2')]);
this.selected = ko.observable();
this.select = function(item) {
self.selected(item);
};
};
ko.applyBindings(new vm());
</script>