Как удалить элемент сопоставленного массива Knockout, сгенерированный из JSON, возвращенного из вызова ajax?

Я использую Knockoutjs и подключаемый модуль сопоставления для создания моделей представлений из JSON, возвращенных из вызова сервера. Я получаю массив с сервера, создаю модель, которая имеет сопоставленный массив в качестве свойства, затем данные привязывают массив к шаблону для отображения всех данных на экране. Который отлично работает.

Я бы хотел, чтобы рядом с каждым элементом отображалась кнопка, которая позволяла бы мне его удалить, как в примере в это видео (см. примерно 14:20).

Но в видео он привязывается к функции, определенной на элементах массива. Мои элементы генерируются из JSON с помощью подключаемого модуля сопоставления, поэтому я не уверен, как добавить функцию к каждому элементу и хочу ли я это сделать. Или я могу привязать нажатие кнопки к функции в модели представления и передать идентификатор элемента, с которым связана кнопка?

мой джаваскрипт:

<script type="text/javascript">
    var supplierModel;

    $(function(){        
        getAllSuppliers();       
    })

    function getAllSuppliers(){
        $.getJSON('/SWM60Assignment/allsuppliers',function(responseData){
            supplierModel = new SupplierModel(responseData);
            ko.applyBindings(supplierModel);            
        });
    }
    var SupplierModel = function (supplierList) {
        var self = this;

        self.suppliers = ko.mapping.fromJS(supplierList);
        self.remove = function(supplierId){
            // how can I get the buttons to call this method with the id 
            // of the element they are the button for?
            alert('remove called with supplier id:'+supplierId);
        }
    };
</script>

а это шаблон:

<script id="supplierTemplate" type="text/html">
    <li>
        Name: <span data-bind="text:name"></span> Address: <span data-bind="text:address"></span>
        <button data-bind="click:<what can I put here to bind correctly>>">Remove supplier</button>
    </li>
</script>

и HTML для полноты:

<ul class="vertical" data-bind="template:{name:'supplierTemplate',foreach:suppliers}"></ul>

knockout.js knockout-mapping-plugin
person Sam Holder    schedule 19.04.2012    source источник

Ответы (1)


arrow_upward
10
arrow_downward

как насчет:

<button data-bind="click: $parent.remove">Remove supplier</button>

см. примечание 1 здесь

Если вы используете ko.mapping, это говорит, что «массивы преобразуются в наблюдаемые массивы». Таким образом, ваше свойство suppliers будет иметь методы массива ko (например, remove ).

Вы также можете передать фактический supplier в свою функцию remove:

var SupplierModel = function (supplierList) {
    var self = this;

    self.suppliers = ko.mapping.fromJS(supplierList);
    self.remove = function(supplier){
        // observable array
        self.suppliers.remove( supplier ); 
    }
};
person ericb    schedule 19.04.2012
comment
Спасибо! Я знал, что это должно быть возможно, просто не был уверен, каков синтаксис. - person Sam Holder; 20.04.2012
comment
После удаления элемента длина объекта поставщиков не меняется. Любой способ сделать это. - person vivek; 19.09.2013
comment
Должно. Как вы запрашиваете длину этого массива? - person beauXjames; 28.09.2013