Question

进入Knockout并慢慢习惯它。试图在一个新项目中使用它，但我很难将事情排成一行。虽然我理解并且可以做简单的例子（带有绑定到ko.observables的文本框的简单形式，或绑定到ko.observableArray的表或列表），但我无法获得组合的语法，特别是如果我想要将数据转换为JSON格式，以便通过Web服务将其传输到数据库中。

基本上它是一个数据输入表单，带有一些文本输入框，然后是项目列表（想想公司信息+它的员工列表）。

我在这里有一个示例小提琴：http://jsfiddle.net/rhzu6/

在saveData函数中，我只是不知道如何打包数据。做ko.toJS（self）只显示“对象”。

我尝试将数据定义为对象，但很快就丢失了：

function Company(CompanyName, ZipCode) {

    var self = this;
    self.ZipCode = ko.observable(ZipCode);
    self.CompanyName = ko.observable(CompanyName );
    self.Employees = ko.observableArray();
}

function Employee(FirstName, LastNameB) {
    var self = this;
    self.FirstName = ko.observable(FirstName);
    self.LastName = ko.observable(LastName);
}

然后ViewModel看起来像：

function viewModel() {
    var self = this;
    self.Company = ko.observable(); // company?
    self.Employees = ko.observableArray(); // ?
}

但遇到了同样的问题。并且还有绑定问题 - data-bind：“value：CompanyName”抛出异常，说它不知道CompanyName是什么......

让我难过。我确信这很容易让我失踪。

任何和所有帮助将不胜感激！

由于

Answer 1

您正在寻找ko.toJSON，它将首先在您的ViewModel上调用ko.toJS，之后调用JSON.stringify。

ko.toJS会将您的淘汰模型转换为一个简单的JavaScript对象，因此将所有可观察对象替换为各自的值。

我更新了您的Fiddle以进行演示。

有关详细信息，请查看Ryan Niemeyers博客中的post。

另一种方法是使用ko.utils.postJson：

ko.utils.postJson(location.href, {model: ko.toJS(viewModel) });

再次注意ko.toJS。

Answer 2

在我看来，好像你（语义上）想要提交一份表格。因此，我认为您应该使用submit binding。最大的好处是你可以听取提交事件，它允许通过其他方式提交，例如Ctrl + Enter或你想要的任何其他键盘组合。

这是一个关于submitEvent处理程序的样子的示例。请注意，它使用ko.mapper，这是从任何所需的JS / JSON对象创建viewModel的好方法。通常，你会有

[后端型号] - ＆gt; 序列化 - ＆gt; [JS / JSON-ojbect] - ＆gt; ko.mapper.fromJSON（obj） - ＆gt; knockout wired viewModel 。

viewModel.submitEvent = function () {
    if (viewModel.isValid()) { //if you are using knockout validate
        $.ajax(
            {
                url: '/MyBackend/Add',
                contentType: 'application/json',    
                type: 'POST',
                data: ko.mapping.toJSON(viewModel.entityToValidateOnBackend),
                success: function (result) {
                    ko.mapping.fromJSON(result, viewModel);
                }
            }
        );
    }
};

祝你好运！

对复杂的类结构和Knockout感到困惑

2 个答案: