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但是使用从JSON生成的ViewModel，我不必手动创建它。

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);

如何创建一个与可观察数组具有相同结构的observable

1 个答案: