Question

我想在Bootstrap模式中显示用户数据的详细信息。我使用AJAX加载数据，并使用knockout映射插件将它们绑定到Knockout ViewModel。

数据已正确加载并绑定到淘汰模型，但我从未在UI上看到数据。有人看到问题所在吗？

user.js的

var model = new UserViewModel();

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

userViewModel.js

function UserViewModel() {
    var self = this;
    self.userHelper = ko.observable();
    self.userHelper.user = ko.observable();

    self.loadUserData = function(userId) {
        $.ajax({
            type : "POST",
            url : "/user/loadUserDetail.htm",
            data: {"userId": userId},
            success : function(response) {
                var parsedJSON = $.parseJSON(response);
                var userHelper = new UserHelper(parsedJSON);
                self.userHelper = userHelper;

                // correct first name is printed
                console.log(userHelper.user.firstName()); 
                $("#user-dialog").modal('show');
            },
            error : function(e) {
                showErrorBox('Error: ' + e.status);
            }
        });
    }
}

function UserHelper(data) {
    this.user = ko.mapping.fromJS(data.user);
    this.availableGroups = ko.mapping.fromJS(data.availableGroups);
    this.errors = ko.observableArray(mapDictionaryToArray(data.errors));
}

user.jsp

<input type="text" class="form-control input-sm" data-bind='attr:{value: userHelper.user.firstName}' name="user.firstName" />

更新：

我更新了我的代码，但数据仍未在UI上显示。这里有任何错误吗？

userViewModel.js

var userHelper = {
    user: ko.observable(),
    availableGroups: ko.observableArray([]),
    errors: ko.observableArray([])
};

function mapData(data) {
    userHelper.user = ko.mapping.fromJS(data.user);
    userHelper.availableGroups = ko.mapping.fromJS(data.availableGroups);
    userHelper.errors = ko.observableArray(mapDictionaryToArray(data.errors));
}

function UserViewModel() {
    var self = this;

    self.loadUserData = function(userId) {
        $.ajax({
            type : "POST",
            url : "/user/loadUserDetail.htm",
            data: {"userId": userId},
            success : function(response) {
                var parsedJSON = $.parseJSON(response);
                mapData(parsedJSON);
                console.log(userHelper.user.firstName());
                registerClickListener();
                $("#user-dialog").modal('show');
            },
            error : function(e) {
                showErrorBox('Error: ' + e.status);
            }
        });
    }
}

JSP：

<input type="text" class="form-control input-sm" data-bind='attr:{value: userHelper.user.familyName}' name="user.familyName" />

Answer 1

你滥用了ko的观察结果：

self.userHelper = ko.observable();
//...
self.userHelper = userHelper; // This is wrong
//...
self.userHelper(userHelper); //This is correct

您还必须更改用法：

.. data-bind='attr:{value: userHelper().user.firstName}'...

此外，由于您的初始userHelper值未定义，因此敲除首次绑定时会出现问题，如果定义了userHelper（），则必须将检查添加到HTML中。

另一种方法是你最初可以定义一个UserHelper的空模型，然后在ajax完成时加载新的JSON值

淘汰赛：JSP上没有显示数据

1 个答案: