Как создать наблюдаемый объект с той же структурой, что и в наблюдаемом массиве

#javascript #jquery #knockout.js

Вопрос:

Я создаю наблюдаемый массив из JSON, который поступает с сервера.

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

Я могу связать свойства с моим пользовательским интерфейсом

 <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 с жестко заданными свойствами. Я не хочу этого делать, поскольку у меня много представлений со многими свойствами. Какой может быть наилучший подход к этому?

Обновить

Скрипка

Это именно то, что мне нужно: CRUD, но с ViewModel, который генерируется из JSON, и мне не нужно создавать его вручную.

1. Не могли бы вы настроить JSFiddle или что-то в этом роде? Я не совсем понимаю ваш вопрос или проблему

2. Взгляните на плагин отображения knockout для автоматического создания наблюдаемых свойств в viewmodel: knockoutjs.com/documentation/plugins-mapping.html

3. Вам понадобится Add кнопка, которая будет служить в качестве «выбора», в который передается новый элемент selected . Затем свойства нового элемента могут быть установлены в вашей edit форме.

4. @WayneEllery — передача JSON в observableArray() делает то же самое, не создавая наблюдаемые для всех свойств.

5. @Origineil — У меня есть кнопка добавления. Как я могу создать объект, аналогичный тому, что я получаю в JSON?

Ответ №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);