ノックアウト使用時にjqueryクリックイベントが発生しない

Question

knockout click binding documentation's "Note 3"によれば、Knockoutはクリックイベントがデフォルト機能を実行しないようにします。この振る舞いをオーバーライドするには、ハンドラ関数からtrueを返すだけです。だから、私はこのマークアップを持っている：私は、関数からtrueを返すよ

$(function() {  
    $('#btnParse').on('click', function() { alert('clicked'); return 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> 

、私はこのようなボタンにクリックイベントを添付したいです。このハンドラは決して起動しません。どうすればこの作品を作れますか？

Answer 1

クリックバインドで参照する注釈は、カスタムのクリックハンドラではなく、ビューモデル内のメソッドを参照します。

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

Answer 2

私の状況では、observableArrayを使っていましたが、その配列の各項目にjQueryの魔法を適用する必要がありました。私はカスタムバインディングでいくつかの問題を抱えていましたが、その配列内の各項目から2つの変数を取ることを望んでいませんでした。だから、私のパッケージでは、暗いマナジックのいくつかを関数として観測不可能なアイテムに追加しました。その名前がぎこちなくなったら、私が作業していたマップはその場所に移動します。

HTML：

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

CODE：

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); 
    };//*/ 
}//*/ 

私はこれは私が問題はあなたがバインドしようとしているDOMのノックアウトの変更としなければならないと思います

Answer 3

を役に立てば幸いイベント。これを回避するには、親要素<div>にclick関数を割り当ててみてください。クリックハンドラを割り当てるときは、セレクタでオーバーロードを使用して、含まれているボタンがクリックされたときにのみクリックを処理するように指定します。

<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> 

をその後にスクリプトを変更します。たとえば、次のようなdiv要素を変更

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

なお、この<div>はDOM、（テンプレート、foreachのを修正し、別の論理ブロック内に含まれている場合ループなど）、おそらく#btnContainerタグを、そのような論理ブロックの一部ではない<button>の最初の祖先に設定する必要があります。

Answer 4

あなたのクリックハンドラが決して発射しない理由は、あなたの要素に決して適用されていないからです。あなたはjqueryの中でこれを行うときに：

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

そして、そのイベントにバインドするためのハンドラのために、最初のjQueryのは、あなたの$('.some-class')セレクタを見つける必要があります。あなたのケースでは、おそらく#btnParseは、イベントをバインドするときにノックアウトによってページにレンダリングされません。または、可能であれば、元の要素がレンダリングされ、破棄され、次に別の要素がレンダリングされます。この2番目のシナリオでは、イベントハンドラはボタン上に残りません。一つの選択肢は、（私はお勧めしません）documentレベルでのように、DOMにハンドラ高いアップに結合することで、フィルタのみにイベントID #btnParseで何かのものである：

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

理由I悪いノックアウトの練習であることをお勧めしません。clickバインディングを使用する必要があります。また、id属性を使用していますが、これは一般にテンプレート化された動的コンテンツのための一般的な考えではありません。独自の静的要素のIDが絶対に必要でない限り、クラスを使用します。

ノックアウトのクリックバインディングを正しく使うには、ノックアウトがどのようにスコーピングを行うのかを理解する必要があります。さらに

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

場合、：、たとえば、あなたがループ内でクリックを結合している、とあなたはあなたのメインのビューモデルからハンドラをしたい場合は、ループがあなたのコンテキストが変更されるため、親スコープを参照する必要があなたのハンドラが（this）で実行さJavascriptのコンテキストを変更する必要があり、その後、あなたはこのようにクリックハンドラをバインドする必要があります。

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

その原料でビットを再生すると、あなたがしている場合は、新しい質問をしますまだ混乱しています。がんばろう！