当我们使用 Jquerybootgrid 时，Knockout Click 不起作用

Question

我是 KnockoutJS 的新手。我想在单击按钮（或锚点）时触发事件。我已使用 Jquery Bootgrid 将数据附加到 table，但我无法收到警报。

var vm;

function VM() {
  var self = this;
  self.ShowMessage = function() {
    alert("Hi");

  }
}
$(document).ready(function() {
  var data = [];
  data.push({
    Name: "Sample"
  })
  data.push({
    Name: "Sample2"
  })
  data.push({
    Name: "Sample3"
  })



  $("#UserList").bootgrid({
    caseSensitive: false,

    formatters: {
      "Actions": function(column, curr) {
        return "<a href='#'  data-bind='click:VM.ShowMessage' class='on-default edit-row'>Hello</a>";
      }

    }
  }).bootgrid("append", data);



  vm = new VM();
  ko.applyBindings(vm, document.getElementById("MyDiv")[0]);
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  <div class="row" id="MyDiv">

    <table style="overflow-y:hidden; max-height: 460px;" id="UserList" class="table table-condensed" cellspacing="0">
      <thead>
        <tr>

          <th data-column-id="Name">Name</th>
          <th data-formatter="Actions" data-visible-in-selection="false">Actions</th>

        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
</div>

请帮帮我。

关联jsFiddle here

Answer 1

您可以使用 bootgrid 事件，然后在数据准备好后应用绑定。

loaded event Fires after data is loaded as per doc.

代码：

$("#UserList").bootgrid({ /*your settings*/ }).bootgrid("append", data)
  .on("loaded.rs.jquery.bootgrid", function(e) {
      if ($(this).bootgrid("getTotalRowCount")) // >0 auto evaluates to true
        ko.applyBindings(new VM(), document.getElementById("MyDiv")[0]);
    }
 });

Always append the plugin namespace .rs.jquery.bootgrid to the event name in order to subscribe events.

grabs

的工作样本

当我们使用 Jquerybootgrid 时，Knockout Click 不起作用

Knockout Click is not working when we are using Jquerybootgrid

jquery

knockout.js

jquery-bootgrid