Knockout Foreachでブートストラップモデルをポップアップ

Question

ノックアウトを使用している間にモーダルを表示しようとしていますが、foreach内から呼び出されるたびにモーダルが機能しないか、ハードコーディングされているリンクをクリックすると、モーダルをポップするのではなく、新しいページでコンテンツが開きます。それは37点の作品、それが

<div class="modal fade" tabindex="-1" role="dialog" data-bind="modal:showDialog"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">title</h4> 

     </div> 
     <div class="modal-body"> 
     body 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-primary btn-xs" data-bind="click : submit">Close</button> 
     </div> 
    </div> 
    </div> 
</div> 
<table> 

    <thead> 
    </thead> 
    <tbody data-bind="foreach: SearchOptions" class="table"> 
    <tr class="gridRowSelect"> 

     <td> 
     <span data-bind="text: id"></span> 
     </td> 
     <td> 
     <span data-bind="text: text"></span> 
     </td> 
     <td> 
     <button data-bind="click: function(){showDialog(true)}">Show</button> 
     </td> 
    </tr> 
    </tbody> 
</table> 
<button data-bind="click: function(){showDialog(true)}">Show</button> 

https://jsfiddle.net/slipmatt/ckuqrrnn/2/

Answer 1

接頭辞する必要がなければならないように、ライン上のボタンに対し、クリックを無視するように

は以下のフィドルを見てください、ライン32上のボタンが見えます $parentキーワードで showDialogはの内側に適切 binding context

<button data-bind="click: function(){$parent.showDialog(true)}">Show</button> 

を提供するためにバインディングでは、AttributeViewModelではなく、それぞれAttributeKeyオブジェクトの中でノックアウトがshowDialogを探します。この場合、$rootという接頭辞を付けることもできます。この場合、$parentと$rootはAttributeViewModelインスタンスを参照します。

Updated fiddle

Answer 2

ブラウザのコンソールを開くと、エラーが表示されます：

Uncaught ReferenceError: showDialog is not defined

これは、最初のボタンが結合foreach内にあるためで、そのためshowDialog機能を探していますAttributeKeyアイテム自体に存在する必要があります。あなたが代わりに親コンテキストにそれをポイントする必要があります。これは、ネストされた複数持っている場合に便利です

<button data-bind="click: function(){$root.showDialog(true)}">Show</button> 

に

：

<button data-bind="click: function(){$parent.showDialog(true)}">Show</button> 

親はまた、ルートモデルですので、あなたもいることを使用することができますあなたのルートモデルに直接戻る必要があります。