在单击标题时显示Knockout中的描述

时间:2012-01-23 01:16:27

标签: css animation knockout.js

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

1 个答案:

答案 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>