如何创建与可观察数组具有相同结构的可观察对象

Question

我正在从来自服务器的 JSON 创建一个可观察数组。

var ViewModel = function (data) {
            var self = this;
            self.list = ko.observableArray(data);
            self.selected = ko.observable();
}

我可以将属性与我的 UI 绑定

<form data-bind="with: selected">
   <input type="text" data-bind="value: Name">
   <button type="submit" class="btn btn-primary" data-bind="click: $root.create">Save</button>
</form>

我还有一个点击编辑方法，将所选对象放入selected

self.edit = function (o) {
                self.selected(o);
            }

遍历列表的代码：

<tbody data-bind="foreach: list">
            <tr>
                <td data-bind="text: Name"></td>
                <td><button data-bind="click: $root.edit">edit</button></td>
            </tr>
        </tbody>

创建代码如下：

self.create = function (formElement) {
                $(formElement).validate();
                if ($(formElement).valid()) {
                    $.post(baseUri, $(formElement).serialize(), null, "json")
                        .done(function (o) {
                            self.list.push(o);
                        });
                }
            }

那么如何使用相同的表单来添加对象呢？我对表单上的数据绑定有点困惑。如果不选择对象，我无法显示表单。

从我看到的所有示例来看，我似乎必须创建一个带有硬编码属性的 ViewModel。我不想这样做，因为我有很多具有许多属性的视图。最好的方法是什么？

更新

Fiddle

这正是我所需要的：CRUD，但 ViewModel 是从 JSON 生成的，我不必手动创建它。

Answer 1

也许这会对你有所帮助，http://jsfiddle.net/3uZW7/7/

function mapFactory(factory)
{
    var self = this;
    self.name = ko.observable(factory.name);
    self.isEdited = ko.observable(false);
};

var ViewModel = function (data) {
    var self = this;
    self.list = ko.observableArray();

    self.newFactory = ko.observable();
    self.addNewFactory = function()
    {
        if (self.newFactory())
            self.list.push(new mapFactory( { name: self.newFactory() } ));
    };

    self.toggleEdit = function(data)
    {
       data.isEdited( ! data.isEdited() );  
    };

    self.save = function(data)
    {
      // ajax.. etc..

        data.isEdited(false);
    };

    self.delete = function(data)
    {
     // ajax.. etc..

        self.list.remove(data);
    }
 };

var viewModel = new ViewModel;

// Call/Retrieve ajax data and push to observableArray
var retrieveDataFromAjax = [
    { 'name' : 'Mike' },
    { 'name' : 'Jack' }    
];

ko.utils.arrayForEach(retrieveDataFromAjax, function(data)
{
   viewModel.list.push(new mapFactory( data ));                         
});

ko.applyBindings(viewModel);