Knockout.jsを使用したWenzhixinブートストラップテーブル

Question

データをクリックしてブートストラップテーブルにイベントをバインドしようとしていて、それを動作させることができません。私たちは、ボタン、hrefs、trとtdのにバインドしようとしましたが、それは難しくはありません。

私たちはノックアウトによってデータベースからのデータを正常に取り込むことができます。

 <tbody> 
     <!-- ko foreach: listOfCustomers--> 
     <tr class="clickable-row"> 
      <td> <span class="glyphicon glyphicon-move"></span></td> 
      <td class="text"><button type="button" class="bananen" onclick="App.CustomersScreen.onAfterRenderFunc();"></button></td> 
      <td class="text">{{ name }}</td> 
      <td class="text">{{ town }}</td> 
      <td class="text">{{ mail }}</td> 
      <td class="text">{{ phone }}</td> 
      <td class="text">Motor</td> 
      <td class="text"><span class="glyphicon glyphicon-exclamation-sign"></span></td> 
      <td data-visible="false" 
       data-switchable="false" class="hidden">{{ id }}</td> 
     </tr> 
     <!-- /ko --> 
     </tbody> 

私はあなたの質問に事前に

感謝を理解してほしいです。

Answer 1

間違ったデータバインディング構文を使用しているようです。

ノックアウトはdata-bind属性を使用しますが、例のHTMLはハンドルバーのようなJavaScriptテンプレートエンジンが必要なように見えます。

Knockoutでは、レンダリング/テンプレートエンジンを好きなものに置き換えることができるので、ハンドルバーなどのエンジンを使用することはできますが、あなたの質問では言わなかったので、あなたは避難所です'は、Knockoutのテンプレートエンジンをスワップアウトしました。

私が正しい場合は、あなたのHTMLは次のようなものでなければなりません：それはあなたがハンドルバーのテンプレートを使用しているように、あなたは `onclick`、およびブートストラップは同様にDOMを操作することができる持って見えます

<tbody> 
    <!-- ko foreach: listOfCustomers--> 
     <tr class="clickable-row"> 
      <td> <span class="glyphicon glyphicon-move"></span></td> 
      <td class="text"><button type="button" class="bananen" onclick="App.CustomersScreen.onAfterRenderFunc();"></button></td> 
      <td class="text" data-bind="text: name"></td> 
      <td class="text" data-bind="text: town"></td> 
      <td class="text" data-bind="text: mail"></td> 
      <td class="text" data-bind="text: phone"></td> 
      <td class="text">Motor</td> 
      <td class="text"><span class="glyphicon glyphicon-exclamation-sign"></span></td> 
      <td data-visible="false" 
     data-switchable="false" class="hidden" data-bind="text: id"></td> 
     </tr> 
    <!-- /ko --> 
</tbody>