2

进入淘汰赛并慢慢习惯它。试图在一个新项目中使用它，但很难让事情排成一行。虽然我理解并且可以做一些简单的例子（文本框绑定到 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 是什么......

把我难住了。我敢肯定，我只是错过了一些简单的事情。

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

谢谢

4

2 回答 2

0

您正在寻找ko.toJSON哪个将首先在您的 ViewModel 上调用 ko.toJS ，然后再调用JSON.stringify。

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

我更新了你的小提琴来演示。

有关更多信息，请查看 Ryan Niemeyers 博客中的这篇文章。

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

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

再次注意ko.toJS。

于 2013-01-09T16:20:58.750 回答
0

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

这是有关 submitEvent 处理程序外观的示例。请注意，它使用ko.mapper，这是从您想要的任何 JS/JSON 对象创建 viewModel 的好方法。通常，你会

[后端模型] ->序列化-> [JS/JSON-ojbect] -> ko.mapper.fromJSON(obj) ->淘汰有线 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);
                }
            }
        );
    }
};

祝你好运！

于 2013-01-10T09:31:16.423 回答