как добавить новый элемент с помощью плагина нокаута

Я пробую образец нокаут-карты и думаю, что почти закончил. Кажется, я не могу добавить новый Foo в viewModel.foos - может ли кто-нибудь увидеть, что я здесь пропустил?

var Foo = function (data) {

    var self = this;
    self.id = data.id;
    self.Name = ko.observable(data.Name);

}

var dataMappingOptions = {
    key: function(data) {
        return data.id;        
    },
    create: function (options) {

        return new Foo(options.data);
    }
};


var viewModel = {

    foos: ko.mapping.fromJS([]),
    loadInitialData: function () {
        ko.mapping.fromJS(serverData, dataMappingOptions, viewModel.foos);
    },
    loadUpdatedData: function () {
        ko.mapping.fromJS(serverData, dataMappingOptions, viewModel.foos);
    }
};

viewModel.addFoo = function () {
    viewModel.foos.push(ko.mapping.fromJS(new Foo()));
    viewModel.loadUpdatedData();
}


    <ul data-bind="template: {name: 'TopTemplate'}"></ul>
<script type="text/html" id="TopTemplate">
    <li><span>Result</span>
        <ul data-bind=" template: {name:  'FooTemplate' , foreach: foos} " style="list-style-type:circle;margin-left:15px">
        </ul>
    </li>
    <button data-bind='click: addFoo'>Add Foo</button>
</script>       
<script type="text/html" id="FooTemplate">     
    <li><span data-bind='text: Name'></span>

    </li>

</script>

knockout.js knockout-mapping-plugin
person MikeW    schedule 03.08.2012    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Вы можете просто напрямую добавить новый Foo в свой observableArray.

Вот пример загрузки некоторых исходных данных, а затем загрузки некоторых обновленных данных вместе с кнопкой для добавления новых элементов на стороне клиента. http://jsfiddle.net/rniemeyer/wRwc4/

var viewModel = {
    foos: ko.mapping.fromJS([]),
    loadInitialData: function() {
        ko.mapping.fromJS(initialData, dataMappingOptions, viewModel.foos);
    },
    loadUpdatedData: function() {
        ko.mapping.fromJS(updatedData, viewModel.foos);
    }
};

viewModel.addFoo = function() {
    viewModel.foos.push(new Foo({ id: 0, Name: "New" }));
};
person RP Niemeyer    schedule 03.08.2012
comment
Большое спасибо за вашу помощь (и за другой вопрос тоже :)) - person MikeW; 03.08.2012

arrow_upward
11
arrow_downward

Поскольку исходный постер применяет наблюдаемые объекты внутри членов класса Foo, нет необходимости применять к нему ko.mapping.fromJS. Однако я обнаружил, что когда у вас есть «сырой» объект json (без отображений), который вам нужно добавить в наблюдаемый массив (т.е. вы ранее применили ko.mapping.fromJS()), вам действительно нужно выполнить ko.mapping.fromJS, например

myArray.push(ko.mapping.fromJS(myNewRawJsonItem));

В противном случае ваши привязки шаблонов (если они у вас есть) будут жаловаться, что «TypeError xxxx не является функцией».

person David Fidge    schedule 13.12.2012
comment
Ты спасатель жизни. Мне было интересно, почему он выдает эту ошибку. Большое спасибо. - person shriek; 04.03.2014