Question

我已经构建了一个表示时间片的视图模型，其结构如下：

function TimeslotViewModel() {
    this.timeslots = ko.observableArray();

    this.updateTimeslots = function(timeslots) {
        this.timeslots.destroyAll();
    }

    this.clearTimeslots = function() {
        this.timeslots.destroyAll();
    }

    this.addTimeslot = function(timeslot) {
        this.timeslots.push(timeslot);
    }
}

function Timeslot(time, available) {
    this.time = time;
    this.available = available;
}

我正在尝试以表格格式呈现它，如下所示：

<div class="container">
    <table class="table">
        <thead>
            <tr><th>Time</th><th>Status</th>
        </thead>
        <tbody data-bind="foreach: timeslots">
            <td data-bind="text: time"></td>
            <td data-bind="text: available"</td>
        </tbody>
    </table>
</div>

我已经加载了页面加载：

$(function() {
    ko.applyBindings(new TimeslotViewModel());
});

我正在尝试根据ajax调用的回调结果填充此表，但它似乎没有按预期工作。这是我试过的：

$.getJSON(
          "/myAjaxCall",
          function (jsonData) {
              var timeslotViewModel = new TimeslotViewModel();
              timeslotViewModel.clearTimeslots();
              $.each(jsonData, function (i, ts) {
                  var tsData = JSON.parse(ts);
                  var timeslot = new Timeslot(tsData.time, tsData.booked);
                  timeslotViewModel.addTimeslot(timeslot);
              });
          });

不幸的是，我没有看到我的视图模型的数组从这段代码中完全填充。基于回调函数的响应填充视图模型的正确方法是什么？

Answer 1

您正在创建一个新的视图模型，而不是更新当前的模型。

替换此行

var timeslotViewModel = new TimeslotViewModel();

创建全局视图模型：

var myVm = new TimeslotViewModel();
ko.applyBindings(myVm);

//...
var timeslotViewModel = myVm;

或从节点获取当前的：

var timeslotViewModel = ko.contextFor($('.container').get(0)).$root

如何基于单独的回调而不是用户输入更新淘汰视图模型

1 个答案: