javascript - Knockout JS 中未收到任何值

Question

我正在使用 Knockout JS 构建一个小表单，并使用 VB.NET 构建一个 Web 服务，该 Web 服务将采用三个字符串(名字、姓氏和雇用日期并保存到数据库)我已经测试了该 Web 服务在常规 javascript 上，它工作得很好，但不是我尝试使用 Knockout JS 来执行相同的功能。

问题是使用 ko.observable 等待值的对象没有接收任何值，因此 null 对象被发送到 Web 服务。

这是脚本

 <script type="text/javascript">

    var viewModel = function (f,n,h) {

        var self = this;
        this.fName = ko.observable(f);
        this.lName = ko.observable(n);
        this.hDate = ko.observable(h);


        self.savePerson = function () {

            alert("savePerson");

            var person = {
                FirstName: self.fName,
                LastName: self.lName,
                HireDate: self.hDate

            };


            var DTO = { 'Instructor1': person };


            $.ajax({
                type: "POST",
                data: JSON.stringify(DTO), //JSON.stringify(DTO),
                url: "POSTHandler.asmx/SaveInstructor",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    alert("sucess")
                    OnSaveInstructorAjaxSucceeded(result);
                },
                error: function (result) {
                    alert("error");
                }
            });



            function OnSaveInstructorAjaxSucceeded(result) {

                alert(result);


            }

            function OnSaveInstructorAjaxFailed(xhr, textStatus, error) {

                alert("Error occured while getting attendees, Error Code: " + xhr.status + ". Error desc: " + xhr.statusText);
            }

        }

}


    $(document).ready(function () {
        var _vm = new viewModel("f","n","h");

        ko.applyBindings(_vm);
    });

   </script>

这是 html

         <asp:Label ID="Label1" runat="server" Text="First Name "></asp:Label>
    <input type="text" id="fname1" data-bind="value: $root.fName()"  style="margin-left: 28px" />
    <br />
    <br />
    <asp:Label ID="Label2" runat="server" style="z-index: 1; left: 11px; top: 56px; position: absolute" Text="Last Name"></asp:Label>
    <input type="text" id="lname1" data-bind="value: $root.lName()" style="z-index: 1; left: 107px; position: absolute" />
    <br />
    <asp:Label ID="Label3" runat="server" style="z-index: 1; left: 12px; top: 98px; position: absolute" Text="Hire Date"></asp:Label>
    <br />
    <input type="text" id="hdate1" data-bind="value: $root.hDate()" style="z-index: 1; left: 104px; top: 98px; position: absolute" />

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         <br />
         <br />
         <br />
         &nbsp;


  <%--<button  id="Button1" data-bind="click: $root.savePerson" style="width: 52px" >save</button>--%>

    <input type="button" value="Save" data-bind="click: savePerson" />
         </div>




   <label id="Label4" data-bind="text: $root.fName" ></label>




</form>

Answer 1

双向数据绑定(bind)在您的情况下不起作用，因为您定义了它们错误。在 html 中，您希望将输入的值绑定(bind)到可观察的值，而不是绑定(bind)到可观察的结果。

你正在这样做:

<input type="text" data-bind="value: $root.fName()"  />

但是你应该这样做:

<input type="text" data-bind="value: $root.fName"  /> -- Note the missing parenthesis

然而，这只是问题的一部分。另一个问题是您的 View 模型包含 observables，它们作为函数实现，因此不会使用 JSON.stringify 进行序列化。

解决此问题的最简单方法是使用 ko.toJS 和 JSON.stringify 或 ko.toJSON。

ko.toJS 将遍历对象图并生成一个干净的副本，其属性相当于可观察量，而 ko.toJSON 将调用 ko.toJS 在内部，然后将使用浏览器的 native JSON 序列化器。

因此，根据您的情况，您可以尝试:

var DTO = { 
    Instructor1: {
        FirstName: self.fName,
        LastName: self.lName,
        HireDate: self.hDate
    }
};

$.ajax({
    type: "POST",
    data: ko.toJSON(DTO),
    url: "POSTHandler.asmx/SaveInstructor",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (result) {
        alert("sucess")
    },
    error: function (result) {
        alert("error");
    }
});

或者您可以手动完成工作，无需 knockout 的任何帮助:

var DTO = { 
    Instructor1: {
        FirstName: self.fName(), // Note the parenthesis
        LastName: self.lName(), // Note the parenthesis
        HireDate: self.hDate() // Note the parenthesis
    }
};

$.ajax({
    type: "POST",
    data: JSON.stringify(DTO),
    url: "POSTHandler.asmx/SaveInstructor",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (result) {
        alert("sucess")
    },
    error: function (result) {
        alert("error");
    }
});

这是一个JsFiddle Demo

<小时/>

来自knockout documentation :

To make it easy to serialize view model data, including observables and the like, Knockout includes two helper functions:

ko.toJS — this clones your view model’s object graph, substituting for each observable the current value of that observable, so you get a plain copy that contains only your data and no Knockout-related artifacts

ko.toJSON — this produces a JSON string representing your view model’s data. Internally, it simply calls ko.toJS on your view model, and then uses the browser’s native JSON serializer on the result. Note: for this to work on older browsers that have no native JSON serializer (e.g., IE 7 or earlier), you must also reference the json2.js library.