Question

我有模型类和viewmodel，我正在创建模型类的实例。

当我在输入标签内输入一些文字时，当我点击＆＃34;保存＆＃34;时，该值不会进入视图模型。按钮我得到一个空数组。

HTML

<div id="UserID">
    <lable>UserName</lable>
    <input type="text" data-bind="value:currentUser().userName" />
    <br />
    <!--<span data-bind="text:firstName" /><br />-->
    <label>MobileNumber</label>
    <input type="text" data-bind="value:currentUser().userMobileNumber" /><br />
    <label>Email</label>
    <input type="text" data-bind="value:currentUser().userEmail" /><br />
    <label>Image</label>
    <input type="text" data-bind="value:currentUser().userImageBase64" /><br />
    <label>Image</label>
    <input type="text" data-bind="value:currentUser().userImageType" /><br />
    <label>DeviceUID</label>
    <input type="text" data-bind="value:currentUser().deviceUId" /><br />
    <input type="button" value="save" data-bind="click:currentUser().saveuserDetail" />
</div>

JS

// Model class///
var userModel = function() {
    self = this;
    self.userName = ko.observable()
    self.userMobileNumber = ko.observable();
    self.userEmail = ko.observable();
    self.userImageBase64 = ko.observable();
    self.userImageType = ko.observable();
    self.deviceUId = ko.observable();
}

//ViewModel//
var userDetails = function() {
    self = this;
    self.currentUser = ko.observable(new userModel());
    //ajax post
    self.saveuserDetail = function() {
        var model = ko.toJSON(currentUser());
        console.log(model);
        jQuery.support.cors = true;
        $.ajax({
            url: baseurl + 'api/xxxx/xxxxx',
            type: 'POST',
            data: model,
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function(data) {}
        });
    }
};

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

Answer 1

您已将click甚至<input type="button"/>元素绑定到嵌套saveuserDetail视图模型上的curretUser函数，而您已经实际上将此函数定位在父userDetails视图模型上。

<input type="button" value="save" data-bind="click:curretUser().saveuserDetail" />

将此绑定更改为

<input type="button" value="save" data-bind="click:saveuserDetail" />

或将saveuserDetail函数重定位到curretUser视图模型。

此外，您应该支持textInput元素的<input/>绑定，而不是value绑定。 Here is an explanation差异。

Knockout js将文本框值传递给viewmodel

1 个答案: