Почему при повторной привязке в Knockout появляются лишние записи?

Question

[Максим Никитин]

Имеется страница, контент которой отображается с помощью Knockout. Поставщик содержимого - веб-сервис. При первой загрузке все отображается корректно. Проблемы начинаются при переходе по категориям: при нажатии на категорию каждый товар отображается в нескольких копиях.
HTML-код:

<div class="row" id="productContainer" data-bind="foreach: products">
        <div class="col-6 col-sm-6 col-lg-4">
            <h2 data-bind="text: name"></h2>
            <p data-bind="text: description"></p>
            <div style="float: left; margin-right: 20px">
                 <img width="75" height="75" class="img-thumbnail" data-bind="attr: {src: imagePath }" />
            </div>
            <h2 data-bind="text: price"></h2>
            <form action="/Cart/AddToCart" method="post">
                    <input data-val="true" data-val-number="The field ProductID must be a number" data-val-required="The ProductID field is required." id="ProductID" name="ProductID" type="hidden" data-bind="attr: {value: productID}" />
                    <input id="returnUrl" name="returnUrl" type="hidden" value="/" />
                    <input type="submit" class="btn btn-success" value="+ Add to cart" />
                </form>
        </div>
    </div>

ViewModel KO:

function Product(id, name, description, price, category) {
    var self = this;
    self.productID = ko.observable(id);
    self.name = ko.observable(name);
    self.description = ko.observable(description);
    self.price = ko.computed(function () {
        return price ? '$' + price : 'None';
    });
    self.category = ko.observable(category);
    self.imagePath = ko.observable('/Product/GetImage?ProductID=' + id);
};

function ProductsViewModel(category) {
    var self = this;
    self.products = ko.observableArray([]);

    $.getJSON("api/productservice/" + category, function (allData) {
        var MappedProducts = $.map(allData, function (item) { return new Product(item.ProductID, item.Name, item.Description, item.Price, item.category) });
        self.products(MappedProducts);
    });
}

Код, содержащий обработчик события нажатия на ссылку-категорию:

$(document).ready(function () {
    $('a').click(
   function (e) {
       if (e.target.id == "categoryLink") {
           //$('#productContainer').empty();
           var category = $(e.target).text();
           ko.applyBindings(new ProductsViewModel(category));
       };
   });
    ko.applyBindings(new ProductsViewModel(""));
});

Первая загрузка:

Перешел по категории:


Есть идеи?

Answer 1

[Vlad]

А зачем вы биндите каждый раз одну и ту же viewmodel? Её прибиндить нужно один раз, а потом менять данные в зависимости от запроса и возвращаемых данных.

Comments

[Максим Никитин]

А каким образом при клике можно изменить ViewModel?

[Vlad]

@MaxSter Вам не надо её менять. Вам нужно сказать вюьмодели, что ей нужно загрузить новые данные. Создайте функцию, которая будет загружать данные:

self.getProducts = function(category) {
self.products([]); //или removeAll, в доках есть описание как массив чистить
//а здесь ваш getJSON с нужными параметрами.
}

И по клику вызывайте функцию загрузки во вьюмодели. Если вы не знаете как к ней обратиться - то тут все просто. По document ready создайте переменную

var productsVM = new ProductsViewModel();
ko.applyBindings(productsVM);

А по клику делайте:
productsVM.getProducts(нужная_категория);

[Vlad]

Только с областью видимости переменной разберитесь. Лучше объявите её вне функции document ready, а где-нибудь вверху.

[Максим Никитин]

Спасибо, заработало :)

[Vlad]

@MaxSter пожалуйста.