如何从外部 jquery .ajax 调用中引用我的 viewmodel 上的 observableArray？答案

【问题标题】：How do I reference an observableArray on my viewmodel from an external jquery .ajax call?如何从外部 jquery .ajax 调用中引用我的 viewmodel 上的 observableArray？
【发布时间】：2012-03-04 14:54:24
【问题描述】：

我有一个像这样定义的 knockoutjs 视图模型：

    function TestViewModel() {
    var self = this;
    self.matches = ko.observableArray([]);
    self.selectedItem = ko.observable(self.matches()[0]);
    self.SelectMatch = function (match) {
        self.selectedItem(match);
    };
    self.setMatchList = function (_data) {
        self.matches(_data);
    };
}

我还有一个函数，它使用直接的 javascript 从点击事件中调用——不涉及 knockoutjs 数据绑定。该脚本从服务器检索 JSON 数组，如下所示：

        $.ajax({
        type: 'post',
        contentType: "application/json; charset=utf-8",
        url: "/FindMatches",
        timeout: 10000,
        data: JSON.stringify({ firstname: $("#Person_ProperFirstname").val(), lastname: $("#Person_ProperLastname").val(), gender: $("#Person_Gender").val().substring(0, 1) }),
        success: function (results) {
            if (results.length < 1) {
                //setErrorMessage("No matches were found.");
            }
            else {
                //setErrorMessage("");
                $.each(results, function (item) {
                    TestViewModel.matches.push(item);
                });
                $("#parent_dialog").dialog("open");
            }

现在我想使用从服务器返回的结果更新我的视图模型上的匹配 observableArray，但我无法弄清楚如何执行此操作。除了您在上述脚本中看到的内容外，我还尝试了以下内容：

else {
   TestViewModel.matches(results);
}
//also this
else {
   TestViewModel.setMatchList(results); }

任何帮助将不胜感激。

【问题讨论】：

标签： knockout.js

【解决方案1】：

我假设您的代码使用类似于以下内容的行初始化您的 ko 绑定：

ko.applyBindings(new TestViewModel(data.d));

如果您要创建模型实例的变量，您可以在其他代码中引用它。

var _tvm = new TestViewModel(data.d);
ko.applyBindings(_tvm);

那么你的 ajax 结果会是这样的：

else {
   _tvm.matches(results);
}

这可能不完全正确，但应该让你接近......

【讨论】：

【解决方案2】：

我认为数据是一个对象，你需要它是一个数组。我使用mapping plugin 为我轻松完成转换：

$.getJSON('/casestudies', function(data) {
    vm.casestudies = ko.mapping.fromJS(data);
    ko.applyBindings(vm);
});

否则，对于您的示例，您必须手动进行映射：

        $.each(results, function (item) {
            TestViewModel.matches.push(item);
        });

上面的item仍然是一个对象，所以你还需要foreach这个item的属性并将它映射到你的ko的模型，看看ko's json page：

// Load and parse the JSON
var someJSON = /* Omitted: fetch it from the server however you want */;
var parsed = JSON.parse(someJSON);

// Update view model properties
viewModel.firstName(parsed.firstName);
viewModel.pets(parsed.pets);

【讨论】：