ko.toJSON和ko.toJS返回空

时间:2014-02-02 18:13:08

标签: javascript jquery knockout.js

我在表单中使用jquery和jquery验证。我没有任何问题,所有一切都按预期工作。我是knockout.js的新手。我正在尝试使用knockout.js将数据传递给我写过的web api。我在使用knockout.js将表单数据转换为JSON或简单的java脚本数据时遇到问题。我正在进行的调用是ko.toJSON和ko.toJS,在这两种情况下,在查看调试器时都没有初始化数据。

为什么对ko.JSON的调用和对ko.toJS的调用没有返回我的表单中设置的值?以下是我的脚本块:

 <script>
    $(document).ready(function () {

        jQuery.validator.setDefaults({
            debug: true,
            success: "valid"
        });

        $("#inside-form").validate({
            "errorclass": 'ui-state-error-test',
            "highlight": function (element, errorClass) {
                $(element).addClass("ui-state-error");
            },
            "unhighlight": function (element, errorClass) {
                $(element).removeClass("ui-state-error");
            },
            rules:
                {
                    firstname: "required",
                    lastname: "required"
                },
            messages:
                {
                    firstname: "Please enter your name",
                    lastname: "Please enter your name"
                },
            submitHandler: function () {
                if (confirm("Are you sure you want to submit this course?")) {
                    //console.log("firstname = " + )
                    console.log($("#firstnamefield").val());
                    var jdata = ko.toJSON(this.data);
                    var jdat1a = ko.toJS(data);
                    //Todo insert jquery ajax call here
                }
            }
        });

        function ViewModel() {
            var self = this;

            self.firstname = ko.observable();
            self.lastname = ko.observable();
            self.street1 = ko.observable();
            self.street2 = ko.observable();
        };

        var data = new ViewModel();

        ko.applyBindings(data); // This makes Knockout get to work

        var validator = $("#inside-form").validate();
    });


</script>

1 个答案:

答案 0 :(得分:1)

方法不返回数据的原因是您没有将任何数据传递给它们。如果你是console.log(this.data);和/或console.log(数据);在你试图打开它们之前,你会发现它们都是null。

您需要有权访问数据才能正常工作。

考虑创建一个函数来处理视图模型逻辑而不是匿名事件处理程序 - 它是MVVM方法。示例 -

function ViewModel() {
    var self = this;
    self.firstname = ko.observable();
    self.lastname = ko.observable();
    self.street1 = ko.observable();
    self.street2 = ko.observable();
    self.submitData = function () {
        var thisData = ko.toJS(self);
        // Put your ajax call here
    };
};

注意上面是或多或少的伪代码(在self上调用toSS会导致函数被转换,并且可能会导致循环引用)