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

【问题标题】：Displaying Description in Knockout on clicking Title单击标题时在 Knockout 中显示说明
【发布时间】：2012-02-16 11:41:01
【问题描述】：

我有一个 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>

【问题讨论】：

标签： css animation knockout.js

【解决方案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>

【讨论】：