Javascript ko.toJSON和ko.toJS返回空

我在表单中使用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>

$（文档）.ready（函数（）{
jQuery.validator.setDefaults({
是的，
成功：“有效”
});
$（“#内部表单”）。验证({
“errorclass”：“ui状态错误测试”，
“突出显示”：函数（元素、错误类）{
$（元素）.addClass（“ui状态错误”）；
},
“取消高亮”：函数（元素，errorClass）{
$（元素）.removeClass（“ui状态错误”）；
},
规则：
{
名字：“必选”，
姓氏：“必需”
},
信息：
{
名字：“请输入您的名字”，
lastname:“请输入您的姓名”
},
submitHandler:函数（）{
如果（确认（“您确定要提交此课程吗？”））{
//console.log（“firstname=“+）
log（$（“#firstnamefield”）.val（））；
var jdata=ko.toJSON（this.data）；
var jdat1a=ko.toJS（数据）；
//Todo在此处插入jquery ajax调用
}
}
});
函数ViewModel（）{
var self=这个；
self.firstname=ko.observable（）；
self.lastname=ko.observable（）；
self.street1=ko.observable（）；
self.street2=ko.observable（）；
};
var data=新的ViewModel（）；
ko.applyBindings（data）；//这使得敲除开始工作
var validator=$（“#内部表单”）.validate（）；
});

这些方法不返回数据的原因是您没有向它们传递任何数据。如果您使用console.log（this.data）；和/或console.log（数据）；在尝试展开它们之前，您将看到它们都是空的

你需要有访问数据的权限才能工作

考虑创建一个函数来处理视图模型逻辑，而不是匿名事件处理程序——这是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上调用toJS也会导致函数被转换，并且可能会导致循环引用）

谢谢！我的问题根本不是这段代码，而是我没有在元素的html中添加数据绑定。