Knockout Click не работает, когда мы используем Jquerybootgrid

Question

Я новичок в KnockoutJS. Я хочу запустить событие по нажатию кнопки (или якоря). Я добавил данные в таблицу с помощью Jquery Bootgrid, но не смог получить предупреждение.

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 здесь

Answer 1

Вы можете использовать события bootgrid, а затем применить Bindings, когда данные будут готовы.

загруженное событие. Запускается после загрузки данных в соответствии с документом.

Код:

$("#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]);
    }
 });

Всегда добавляйте пространство имен плагина.rs.jquery.bootgrid к имени события, чтобы подписаться на события.

рабочий образец для захвата