通过 json 的 knockoutjs 数据表不刷新

Question

我是 jQuery、Bootstrap 和 KnockoutJS 的新手，所以我正在寻求一些帮助。

我遵循了这个例子：http://abrudtkuhl.github.io/Simple-Knockout-Js-Paging-Datatables/ 它运行良好，但我无法刷新数据。

我的实现有一些条件字段和一个搜索按钮，所以唯一不同的是数据调用是由 onclick 事件触发的：

<script>
$(document).ready(function () {

    $("#search").click(function () {
        $.getJSON("invoiceStudents.cshtml?yr=" + $("#year").val() + "&dt=" + $("#diet").val(), function (data) {

            ko.applyBindings(new ViewModel(data));
            $("#results").DataTable({ responsive: true });
        });
    });

    function ViewModel(data) {
        var self = this;

        ko.mapping.fromJS(data, {}, self);
    };
});

当我更改我的条件并单击搜索时，我可以看到从服务器返回了不同的 JSON 数据，但是 table 具有我进行的第一次搜索的数据，没有刷新发生.

有没有人想过如何解决这个问题？

Answer 1

你不需要每次获取数据时都applyBindings，事实上你不应该。

调用 applyBindings 一次（在页面加载时），然后只需更新您的数据，绑定就会看到您的 UI 更新。

Answer 2

每次单击搜索时，您都会实例化一个新的 ViewModel 并将其应用于您的视图。尝试将其实例化一次，然后在单击时更新它。

理想情况下，您不会在此处设置点击处理程序。你应该改为放置 data-bind="click: mySearchMethod" 并在你的 ViewModel 上定义一个方法来处理这个，你的 ViewModel 会相应地更新。

同样，您不应在搜索方法中引用例如 #year，它应使用 ViewModel 的可观察属性。

这里的目标是让您的 ViewModel 尽可能少地了解您的视图，这样您就可以在不影响逻辑的情况下自由更改视图。

以下是我的做法：

$( function() {
    var viewModel = new ViewModel,
        view = $( '#results' );
    ko.applyBindings( new ViewModel, view.get( 0 ) );
    view.DataTable( { responsive: true } );
} );

function ViewModel() {
    var now = new Date;
    this.year = ko.observable( now.getFullYear() );
    this.dt = ko.observable();
    this.foo = ko.observable();
    this.bar = ko.observable();
}

ViewModel.prototype.search = function() {
     var viewModel = this;
     $.getJSON("invoiceStudents.cshtml?yr=" + this.year() + "&dt=" + this.dt(), function (data) {
          viewModel.foo( data.foo );
          viewModel.bar( data.bar );
     } );
};

Answer 3

感谢您的帮助。在阅读了您的答案并进行了一些深入研究后，我解决了问题：

    var studentData = [];
    var historyData = [];
    var viewModel = {
        students: ko.observableArray(studentData),
        history: ko.observableArray(historyData)
    };
    ko.applyBindings(viewModel);

我不是在寻找过于优雅的东西，只是现在有用的东西。我做了一个简单的视图模型（我没有意识到你每页只有一个加一个ko.applyBindings）。 data.result 是因为我的 JSON 包裹在结果标签中。

  $("#search").click(function () {
        $.getJSON("json/invEducationStudentSearch.cshtml?yr=" + $("#year").val() + "&dt=" + $("#diet").val(), function (data) {
            viewModel.students(data.result);
        });
    });

我的 html 很简单：

      <tbody data-bind="foreach: students">
          <tr>
              <td><span data-bind="text: id"></span></td>
              <td><span data-bind="text: fn"></span></td>
              <td><span data-bind="text: ln"></span></td>
              <td><span data-bind="text: loc"></span></td>
              <td><span data-bind="text: coy"></span></td>
          </tr>
      </tbody>

通过 json 的 knockoutjs 数据表不刷新

knockoutjs datatable via json not refreshing

datatable

jquery

json

knockout.js