2

如何使用 knockout.js 在外部单击时隐藏 div ...我已经尝试过但没有成功..

html:

<body>
<div data-bind="visible: show">
    <h3>hello world</h1>
</div>

<input type='button' data-bind="click: showBox" value="show"/>

    <body>

脚本：

var viewModel = function()
{
    self = this;
    self.show =  ko.observable(false);
    self.showBox = function(){
            self.show(true);
        $("body").one("click", function(){

                self.show(false);
        });
     };
}

ko.applyBindings(new viewModel());

这是提琴手的例子：

4

1 回答 1

7

由于您只想在用户单击除 div 之外的任何位置时才隐藏 div，因此您必须添加stopPropagation()到 div 的单击事件以及按钮的单击事件，因为否则主体的单击事件将立即触发，隐藏 div 每次尝试单击按钮的时间。请注意，这将使它在显示 div 后单击按钮不会使 div 被隐藏...您还需要移动$("body").on("click"...到 showBox 之外。

该模型：

var viewModel = function()
{
    self = this;
    self.show =  ko.observable(false);
    self.showBox = function(){
            self.show(true);
     };
     $("body").on("click", function(){
         self.show(false);
     });
}

ko.applyBindings(new viewModel());

的HTML：

<div data-bind="visible: show, click: function(data, event) { event.stopPropagation(); }">
    <h3>hello world</h1>
</div>

<input type='button' data-bind="click: function(data, event) { showBox(data); event.stopPropagation(); }" value="show"/>

和一个工作小提琴

于 2013-03-21T16:49:08.293 回答