Question

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

基本上，我想在标题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}}

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

Answer 1

好。第一种选择：你真的需要淘汰赛来控制面板以及它们是打开还是关闭？如果没有，那么您可以考虑使用knockout来渲染内容，然后使用类似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>更改为<span>）

将以下功能添加到视图模型中：

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

然后定义span的css样式：

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

我在这里编写了我的头脑，但希望这应该给你如何继续的要点。

在模板中使用Knockout JS创建可折叠面板

1 个答案: