我如何在div中使用data-bind =“visible:active”

时间:2013-12-31 05:18:41

标签: javascript knockout.js

这是我的代码段:

<div class="showtimes" data-bind="visible: showHide">
 <div data-bind="template: { name: 'movie-grouped-showtimes-template', data: $data }"></div>
</div> 

我希望使用以下内容关闭showHide

<a class="icon arrow" data-bind="click: $parent.showtimes">

我不能在我的视图模型中设置变量showHide,如下所示:

self.showHide = ko.observable(false) ...隐藏

showHide(true); ...显示

我可以使用click : $parent.showtimes进行设置,如下所示:

<a class="icon arrow" data-bind="click: $parent.showtimes"></a>        

1 个答案:

答案 0 :(得分:2)

您只需在viewmodel中设置一个绑定到按钮单击的功能(或修改现有的功能,如本例中的showTimes)以切换showHide的值。

以下是一个简单示例:http://jsfiddle.net/EfrainReyes/LNzDL/

var vm = {
    showHide: ko.observable(false),
    toggle: function() {
        this.showHide( !this.showHide() );
    }
};

ko.applyBindings(vm);

我没有在示例中添加任何其他元素,因为这个问题似乎更倾向于显示/隐藏div。