Question

我持有一个用户列表，其详细信息显示在Bootstrap对话框中。列表已正确填充，详细数据以模态正确显示。但是只要我更新一个或多个输入字段，关闭对话框并打开另一个用户的详细信息，我就会看到编辑后的值而不是第二个用户的值。如果我打开细节而不编辑任何内容，我总能看到正确的值。

问题：如果编辑输入字段，则不会覆盖所选用户（详细信息）。

视图模型：

function UserViewModel() {
    // init
    var self = this;
    self.userList = ko.observableArray([]);
    self.selectedUser = ko.observable([]);
    self.availableGroups = ko.observableArray([]);
    self.errors = ko.observableArray([]);

    self.loadUserList = function() {
        $.ajax({
            type : "POST",
            url : "/user/loadUserList.htm",
            success : function(response) {
                var parsedJSON = $.parseJSON(response);
                self.userList(ko.mapping.fromJS(parsedJSON));
            },
        });
    }

    self.loadUserDetail = function(user) {
        // Set selected user
        self.selectedUser(ko.mapping.fromJS(user));

        // Load available groups
        $.ajax({
            type : "POST",
            url : "/user/loadAvailableGroups.htm",
            success : function(response) {
                var parsedJSON = $.parseJSON(response);
                self.availableGroups(ko.mapping.fromJS(parsedJSON));

                registerClickListener();
                initOrdinaryTooltips();
                $("#user-dialog").modal('show');
            },
        });
    }

    self.addUser = function() {
        self.loadUserDetail(ko.observable([]));
        $("#user-dialog").modal('show');
    }

    self.saveUser = function() {
        // select all assigned groups
        $('#assigned-select option').prop('selected', true);

        var formJson = $("#user-form").serializeArray();
        $.ajax({
            type : "POST",
            url : "/user/saveUser.htm",
            data: formJson,
            success : function(response) {
                var parsedJSON = $.parseJSON(response);
                if(parsedJSON.errors.length == 0){
                    $("#user-dialog").modal('hide');
                } else {
                    initErrorTooltips();
                }
            },
            error : function(e) {
                showErrorBox('Error: ' + e.status);
            }
        });
    }

    self.cancel = function() {
        $("#user-dialog").modal('hide');
    }
}

HTML：

<div class="form-group has-warning">
    <label class="control-label"><spring:message code="masterdata.user.firstName" /></label>
    <input type="text" class="form-control input-sm" data-bind='attr:{value: selectedUser().firstName}' name="user.firstName" />
    <!-- ko foreach: errors() -->
        <!-- ko if: key === 'user.firstName' -->
            <span data-bind='text: value' class="spring-error  fa fa-lg fa-exclamation-circle"></span> 
        <!-- /ko -->
    <!-- /ko -->
</div>

Answer 1

您提供的HTML代码段未显示模式的打开方式以及之前和之后的情况。但是，我建议您使用value binding而不是使用表单元素的attr绑定。

Knockout：未更新已编辑的输入字段

1 个答案: