Knockout JS绑定ajax结果

Question

我是 Knockout JS 的新手，我正在尝试将 ajax 结果数据绑定到 Knockout JS 视图模型，但是在将数据绑定到视图时遇到了问题，我已经创建了模型和视图模型，并且我从阿贾克斯。需要帮助。

下面是我的代码：

// ajax on page load///
$.ajax({
    type: "POST",
    dataType: "json",
    url: baseUrl + 'api/xxx/xxx',
    data: UserProfileModel,
    success: function(data) {
        result = data;
        ////view model////
        userDetailsViewModel(result);
    },
    error: function(error) {
        jsonValue = jQuery.parseJSON(error.responseText);
        //jError('An error has occurred while saving the new part source: ' + jsonValue, { TimeShown: 3000 });
    }
});

//// view model///
var userDetailsViewModel = function(result) {
    console.log(result);
    self = this;
    self.user = ko.observable(new userModel(result));
};

$(document).ready(function() {
    ko.applyBindings(userDetailsViewModel());
});

/// Model////
function userModel(result) {
    this.name = ko.observable();
    this.userName = ko.observable();
}

Answer 1

1. 您的userDetailsViewModel 是一个返回undefined 的函数。如果要创建实际的视图模型，则必须使用 new 或创建 return 语句。例如：

   var UserDetailsViewModel = function(result) { 
     var self = this;
     self.user = ko.observable(new UserModel(result));
   };
   
   var mainUserDetailsViewModel = new UserDetailsViewModel(data);
   

2. 如果你想从 ajax 回调的范围内更新你的视图模型，你必须存储一个引用。或者，您可以将 ajax 功能 作为视图模型的一部分。最简单的例子：

   var mainUserDetailsViewModel = new UserDetailsViewModel(data);
   
   $.ajax({ 
     success: function(data) {
       mainUserDetailsViewModel.user(new UserModel(data));
     }
   });
   

   确保在applyBindings 通话中使用此模型：

   ko.applyBindings(mainUserDetailsViewModel);
   

请注意，我将CapitalizedNames 用于需要实例化的函数，将uncapitalizedNames 用于这些函数的实例。遵循默认命名约定可能有助于跟踪内容。