淘汰赛未绑定来自服务器的更新数据答案

【问题标题】：knockout not binding updated data from server淘汰赛未绑定来自服务器的更新数据
【发布时间】：2014-09-14 17:23:41
【问题描述】：

我正在尝试使用 ko.mapping 插件来更新我的 viewModel。第一次打开局部视图时，我使用以下内容：

  $(document).ready(function () {
        var data = function () {
            return @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model));
        }();

        model = ko.viewmodel.fromModel(ResultModel(data));
        ko.applyBindings(new model);

    });

数据似乎已绑定并正确显示在我的视图中。我的视图模型如下：

  function Member(data) {
        var self = this;
        self.FirstName = ko.observable(data.FirstName);
        self.LastName = ko.observable(data.LastName);
        self.CountyCollections = ko.observableArray(data.CountyCollections);
        self.CountiesPurchased = ko.observableArray(data.CountiesPurchased);
    }

    var ResultModel = function (data) {
        var self = this;
        self.Member = new Member(data);

        self.addCounty = function () {            
            var county = {
                countyCode: ko.observable(""),
                countyName: ko.observable(""),
            };
          self.Member.CountyCollections.push(county);
        }.bind(self);

        self.removeCounty = function (county) {
            self.Member.CountyCollections.remove(county);
        }.bind(self);


    };

问题是当我尝试使用 ko.mapping.fromJS 使用来自控制器的数据更新 viewModel 时。

 $("#SaveReferralsClick").click(function (e) {
        $.ajax({
            url: "/mySurface/Save_Counties",
            type: "POST",
            contentType: 'application/json; charset=UTF-8',
            dataType: 'json',
            cache: false,
            async: false,
            data: ko.toJSON(Member),
            success: function (result) {

             ko.mapping.fromJS(result, {}, ResultModel.Member);

            }
        });

    });

当我检查结果中返回的数据 (success: function (result) {) 时，它似乎是正确的并且已更新。但是当我运行ko.mapping.fromJS(result, {}, ResultModel.Member) 时，viewModel 没有得到更新。

我尝试了多种呼叫ko.mapping.fromJS(result, {}, ResultModel.Member)。例如，当我尝试 ko.mapping.fromJS(result, {}, ResultModel.Member(result)) 我收到一条错误消息，提示 Member 不是构造函数。它指的是以下行：

 self.Member = new Member(data);

任何建议将不胜感激。

【问题讨论】：

我已经创建了一个 jsfiddle 与您的案例的简化版本，它按预期工作。您能否更新它（使用尽可能少的代码）以便重现您的问题？
好的，我已经用 ajax 调用更新了 jsfiddel。我还添加了一个调用 ajax 来模拟我的代码的“加载”按钮。请注意，第一个警报显示输入的正确数据，但第二个警报不显示新数据。我认为主要区别在于我将 ViewModel 作为变量而不是函数名。
我已更新 jsfiddle 并添加了 cmets。有帮助吗？
行得通！谢谢你。在我的 javascript 文件中，我在模型之外有按钮单击功能。当我将它移到内部并引用有效的 self.Member 时。我猜 ko.mapping.fromJS 在 ViewModel 之外调用时无法映射。
好的，我会添加这个作为答案，所以你可以接受它。

标签： c# knockout.js

【解决方案1】：

在 cmets 中进行了一些澄清后，似乎ajax 调用是在不属于视图模型的函数中进行的，从而导致了一些上下文问题。在此处澄清简化视图模型的外观后：

var ViewModel = function (data) {
    var self = this;
    self.mappedModel = new Model(data);
    // This method was outside of the model, I moved it here.
    self.load = function() {
        $.ajax({
            ..., // some ajax parameters
            success: function (data) {                
                // map received data to model
                ko.mapping.fromJS(data, {}, self.mappedModel);
            }
        });
    };
};
// Some Model
function Model(data) {
    var self = this;
    self.Collection = ko.observableArray(data.Collection);
}

Working demo.

【讨论】：