0

我正在尝试使用 Knockoutjs 创建一个简单的表单，它将通过 AJAX 传递一些用户信息。
有人有一个包含三个字段（名字、姓氏、邮政编码）的示例。如果可用，它可以从服务器获取这三个字段或加载空白。然后将这三个相同的字段放在一个对象中并使用 AJAX 发布。 

    function UserInfo(data){
       this.firstname = ko.observable(data.firstname);
       this.lastname = ko.observable(data.lastname);
       this.postal-code = ko.observable(data.postal-code);
     }
     function UserInfoViewModel()
     {
        //Do stuff here to save up
     }

我真的只是在寻找一个简单的例子。但每次我看它都在加载东西数组。这些示例似乎只是跳过了带有一些 AJAX 的标准表单示例。如果我能看到基本上制作粗略表格的最佳实践方法，我可以使用它。

4

2 回答 2

1

为了简化您的代码，您应该使用ko.mapping。ko.mapping 允许您将普通对象“转换”为具有可观察对象的对象。

在你的情况下：

var UserInfo = function (data) {
    // add a self property, it is really helpful when you need to refer the current viewmodel (eg in ajax callback) 
    var self = this;
    // ko.mapping.fromJS creates for all properties in data an observable in self.
    ko.mapping.fromJS(data, {}, self);        
    // the above line do that : 
    /*
        self.firstname = ko.observable(data.firstname);
        ...
    */

    self.save = function () {
        // ko.mapping.toJS converts the viewmodel (with observables) into plain object.
        var raw = ko.mapping.toJS(self);
        $.ajax('url', { data: raw })
            .done(function () {
            // in this context 'this' refers to window, but you can use 'self'.
            alert("success");
        });
    };
};

var initialData = {
    firstname: 'firstname ',
    lastname: 'lastname',
    'postal-code': 'postal-code'
};

var ui = new UserInfo(initialData );

我希望它有所帮助。

于 2013-09-18T08:42:55.960 回答
1

看法： 

<button data-bind="click : $data.save">Save</button>

模型 

self.save()
{
    $.ajax({
        url: "url/saveUser",
        type: "GET",
        data: {
           firstname : self.firstname(),
           lastname: self.lastname(),
           postalCode: self.postalCode()
        },
        success: function(data)
        {
            alert("OK!")
        },
        error: function(jqXHR, exception)
        {
           alert("Not OK!")    
        }
}

JSFiddle 演示

于 2013-09-18T08:44:06.573 回答