6

ノックアウトクリックバインディングドキュメントの「注3」によると、ノックアウトはクリックイベントがデフォルトの機能を実行するのを防ぎます。この動作をオーバーライドするには、ハンドラー関数からtrueを返すだけです。だから、私はこのマークアップを持っています：

<div data-bind="visible:Pages().length == 0">
    <div class="alert alert-info">Click "Parse" button.</div>
    <button class="btn" id="btnParse" title="Parse Tabs">Parse</button>
</div>

次に、次のようにクリックイベントをボタンに添付します。

$(function () {       
    $('#btnParse').on('click', function () { alert('clicked'); return true;});
});

関数からtrueを返していることに注意してください。この偶数ハンドラーは決して起動しません。どうすればこれを機能させることができますか？

4

4 に答える 4

8

クリック ハンドラーが起動しない理由は、要素に適用されていないためです。したがって、jquery でこれを行うと、次のようになります。

$('.some-class').on('some-event', someFunction);

次に、ハンドラーをそのイベントにバインドするには、まず jQuery が$('.some-class')セレクターを見つける必要があります。あなたの場合、#btnParseイベントをバインドするときにノックアウトによってまだページにレンダリングされていない可能性があります。または、元の要素がレンダリングされ、破棄されてから、別の要素がレンダリングされる可能性もあります。この 2 番目のシナリオでは、イベント ハンドラーはボタンに残りません。1 つの代替手段 (これはお勧めしません) は、ハンドラーを DOM のdocument上位 (レベルなど) にバインドし、イベントを id を持つもののイベントのみにフィルター処理することです#btnParse。

$(document).on('click', '#btnParse', function () { console.log('hi'); });

それをお勧めしない理由は、ノックアウトの練習が悪いためですclick。他の投稿で提案されているように、バインディングを使用する必要があります。また、id 属性を使用していますが、テンプレート化された動的コンテンツでは一般的には良い考えではありません。一意の静的要素に id が絶対に必要でない限り、クラスを使用してください。

ノックアウトのクリック バインディングを適切に使用する方法については、1 つの注意が必要なことは、ノックアウトがどのようにスコーピングを行うかを理解する必要があるということです。たとえば、ループ内でクリックをバインドしていて、メイン ビュー モデルからハンドラーが必要な場合は、ループによってコンテキストが変更されるため、親スコープを参照する必要があります。

<!-- ko foreach: someCollection -->
    <a data-bind="click: $parent.someFunction"></a>
<!-- /ko -->

さらに、ハンドラーが実行する Javascript コンテキスト ( this) を変更する必要がある場合は、次のようにクリック ハンドラーをバインドする必要があります。

<!-- ko foreach: someCollection -->
    <a data-bind="click: $parent.someFunction.bind($parent)"></a>
<!-- /ko -->

そのようなもので少し遊んで、まだ混乱している場合は、新しい質問をしてください. 幸運を！

于 2014-09-12T04:29:52.537 に答える
1

問題は、イベントをバインドしようとしている DOM のノックアウトの変更に関係していると思います。これを回避するには、クリック機能を親<div>要素に割り当ててみてください。クリック ハンドラーを割り当てるときは、オーバーロードをセレクターと共に使用して、含まれているボタンがクリックされた場合にのみクリックを処理するように指定します。たとえば、次のように div を変更します。

<div id="btnContainer" data-bind="visible:Pages().length == 0">
    <div class="alert alert-info">Click "Parse" button.</div>
    <button class="btn" id="btnParse" title="Parse Tabs">Parse</button>
</div>

そして、スクリプトを次のように変更します。

$(function () {       
    $('#btnContainer').on('click', '#btnParse', function () { alert('clicked');});
});

これ<div>が DOM を変更する別の論理ブロック (テンプレート、foreach ループなど) に含まれている場合は、そのような論理ブロックの一部ではない#btnContainerの最初の祖先にタグを設定する必要があることに注意してください。<button>

于 2014-09-11T23:38:19.323 に答える
0

私の状況では、その配列内の各項目に jQuery マジックを適用する必要がある observableArray を使用していました。その配列の各項目から 2 つの変数を取得したくないカスタム バインディングに問題がありました。そのため、私のパッケージングでは、名前がクリックされたときに、作業中のマップがその場所に移動するように、機能として観測不可能なアイテムにその暗い名前の一部を追加しました。

HTML:

<ul data-bind="foreach: filteredItems">
    <li class="seat">
        <span class="name" data-bind="text:fullName, click: toggleEmp"></span>
    </li>
</ul>

コード：

function viewModel() {
    var vm = this;
    vm.empData = function(data) {
        var emp = this;
        emp.office_x_loc = ko.observable(data.xLoc);
        emp.office_y_loc = ko.observable(data.yLoc);
        emp.toggleEmp = function () {
            jQuery('#skyLineMap').lhpMegaImgViewer( 'setPosition', emp.office_x_loc(),emp.office_y_loc(), 0.8, false );
    };//*/
}//*/

これが役立つことを願っています

于 2013-02-28T19:48:14.187 に答える
-1

クリック バインディングについて参照するメモは、カスタム クリック ハンドラではなく、ビューモデルのメソッドを参照します。

つまり、要素に a がある場合data-bind="click: doSomething"、<button>ビューモデルのdoSomething()メソッドでカスタム ハンドラーを実行するには、true を返す必要があります。

于 2012-05-08T21:15:39.123 に答える