0

我正在尝试将可折叠面板功能添加到我的淘汰赛模板中。

基本上，我想将图像添加到标题 div，单击该图像会切换图像 url（以显示“加号”或“减号”图标）并切换以下 div 的可见性。

我的模板（我希望具有所需的绑定）如下：

{{each $data}}
<div id="wrapper" class="option-wrapper group show">
    <div class="option-head group">
    <img data-bind="click: showDescription attr: { href: url }>
        <h3 data-bind="text: Name"></h3>
        <select class="option-select" data-bind="options: Values, optionsText: 'value', optionsValue: 'key', value: Selected" />
    </div>
    <div class="option-description" data-bind="visible: showDescription html: Description"></div>
</div>
{{/each}}

我只是不确定如何处理视图模型。任何帮助将不胜感激。

4

1 回答 1

0

好的。第一个选项：您真的需要敲除来控制面板以及它们是打开还是关闭？如果没有，那么您可以考虑只使用敲除来呈现内容，然后使用 jQuery 手风琴之类的东西来处理面板的打开和关闭。

但是，如果这在您的场景中不起作用，我会按照以下方式做一些事情：

{{each $data}}
<div id="wrapper" class="option-wrapper group show">
    <div class="option-head group">
        <span data-bind="click: toggleDescription, css: { 'isOpen': showDescription, 'isClosed': !showDescription() }"></span>
        <h3 data-bind="text: Name"></h3>
        <select class="option-select" data-bind="options: Values, optionsText: 'value', optionsValue: 'key', value: Selected" />
    </div>
    <div class="option-description" data-bind="visible: showDescription, html: Description"></div>
</div>
{{/each}}

（请注意我如何将 更改<img>为 a <span>）

将以下函数添加到您的视图模型：

toggleDescription: function() {
   viewModel.showDescription(!viewModel.showDescription());
}

然后定义跨度的 css 样式：

.isOpen{ background-image: url(../images/open.gif); }  
.isClosed { background-image: url(../images/closed.gif); }

我正在在这里编写代码，但希望这可以为您提供有关如何进行的要点。

于 2012-04-10T14:51:01.180 回答