敲除js将文本框值传递给viewmodel

Question

我有模型 class 和视图模型，我正在创建模型 class 的实例。

当我在输入标签中输入一些文本时，该值不会进入视图模型，当我单击 "save" 按钮时，我得到一个空数组。

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

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

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

要么将此绑定更改为

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

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

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

敲除js将文本框值传递给viewmodel

Knockout js passing textbox value to viewmodel

javascript

knockout.js

knockout-2.0

knockout-mvc