2

ノックアウト.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 に答える