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 here

Answer 1

您可以使用bootgrid事件，然后在数据就绪时使用applyBinding。

已加载事件按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]);
    }
 });

始终将插件名称空间.rs.jquery.bootgrid附加到事件中 name以订阅活动。

grabs

的工作样本

当我们使用Jquerybootgrid时，Knockout Click无效

1 个答案: