单击标题时在 Knockout 中显示说明

Question

我有一个 asp.net mvc2 页面，我在其中使用淘汰赛显示带有标题和描述的数据。我想隐藏描述并根据单击的标题显示描述。任何帮助将不胜感激。我还想将 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>

Answer 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>