Question

我是jQuery，Bootstrap＆amp;的新手。 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数据，但该表包含了我第一次搜索的数据，没有刷新。

有没有人对如何解决这个问题有任何想法？

Answer 1

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

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

Answer 2

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

理想情况下，您不会在此处设置点击处理程序。你应该把data-bind =＆＃34;点击：mySearchMethod＆＃34;并在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敲门的数据表并不令人耳目一新

3 个答案: