Question

我是Knockout JS的新手，我正在尝试将ajax结果数据绑定到Knockout JS viewmodel，但我在将数据绑定到视图时面临问题，我创建了模型和viewmodel，我从中获取结果阿贾克斯。需要帮助。

以下是我的代码：

// 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

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

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

var mainUserDetailsViewModel = new UserDetailsViewModel(data);

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

var mainUserDetailsViewModel = new UserDetailsViewModel(data);

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

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

ko.applyBindings(mainUserDetailsViewModel);

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

Knockout JS将ajax结果归档

1 个答案: