Как очистить/удалить наблюдаемые привязки в Knockout.js?

Ответ 1

Пробовали ли вы использовать метод node для нокаута на вашем элементе DOM для удаления связанных с памятью объектов?

var element = $('#elementId')[0]; 
ko.cleanNode(element);

Затем повторное применение привязок нокаута только к этому элементу с вашими новыми моделями просмотров приведет к обновлению привязки вашего представления.

Ответ 2

Для проекта, над которым я работаю, я написал простую функцию ko.unapplyBindings, которая принимает jQuery node и удаление boolean. Сначала он отключает все события jQuery, поскольку метод ko.cleanNode не заботится об этом. Я тестировал утечку памяти, и, похоже, он работает нормально.

ko.unapplyBindings = function ($node, remove) {
    // unbind events
    $node.find("*").each(function () {
        $(this).unbind();
    });

    // Remove KO subscriptions and references
    if (remove) {
        ko.removeNode($node[0]);
    } else {
        ko.cleanNode($node[0]);
    }
};

Ответ 3

Вы можете попробовать использовать привязку с привязкой, которую предлагают нокауты: http://knockoutjs.com/documentation/with-binding.html Идея состоит в том, чтобы использовать привязки привязки один раз, и всякий раз, когда ваши данные изменяются, просто обновите свою модель.

Предположим, что у вас есть модель верхнего уровня просмотра storeModel, ваша корзина, представленная cartViewModel, и список предметов в этой корзине - например, cartItemsViewModel.

Вы привязывали бы модель верхнего уровня - storeViewModel к всей странице. Затем вы можете отделить части своей страницы, которые несут ответственность за элементы корзины или корзины.

Предположим, что cartItemsViewModel имеет следующую структуру:

var actualCartItemsModel = { CartItems: [
  { ItemName: "FirstItem", Price: 12 }, 
  { ItemName: "SecondItem", Price: 10 }
] }

CartItemsViewModel может быть пустым в начале.

Шаги будут выглядеть так:

• Определите привязки в html. Отделите привязку cartItemsViewModel.

    
      <div data-bind="with: cartItemsViewModel">
        <div data-bind="foreach: CartItems">
          <span data-bind="text: ItemName"></span>
          <span data-bind="text: Price"></span>
        </div>
      </div>
    
  

• Модель магазина поступает с вашего сервера (или создается каким-либо другим способом).

  var storeViewModel = ko.mapping.fromJS(modelFromServer)

• Определите пустые модели в модели верхнего уровня. Затем структура этой модели может быть обновлена ​​с помощью фактические данные.

    
      storeViewModel.cartItemsViewModel = ko.observable();
      storeViewModel.cartViewModel = ko.observable();
   
  

• Привязать модель представления верхнего уровня.

  ko.applyBindings(storeViewModel);

• Когда доступен объект cartItemsViewModel, назначьте его ранее определенному заполнителю.

  storeViewModel.cartItemsViewModel(actualCartItemsModel);

Если вы хотите очистить корзину:   storeViewModel.cartItemsViewModel(null);

Нокаут позаботится о html - то есть он появится, когда модель не будет пустой, и содержимое div (тот, у которого есть "со связыванием" ) исчезнет.

Ответ 4

Мне нужно вызвать ko.applyBinding каждый раз при нажатии кнопки поиска, а отфильтрованные данные возвращаются с сервера, и в этом случае следующая работа для меня без использования ko.cleanNode.

Я испытал, если мы заменим foreach на шаблон, тогда он должен отлично работать в случае коллекций /observableArray.

Вы можете найти этот сценарий полезным.

<ul data-bind="template: { name: 'template', foreach: Events }"></ul>

<script id="template" type="text/html">
    <li><span data-bind="text: Name"></span></li>
</script>

Ответ 5

Вместо использования внутренних функций KO и обращения с обработчиком обработчиков событий JQuery, лучше всего использовать привязки with или template. Когда вы это сделаете, ko повторно создает эту часть DOM и поэтому автоматически очищается. Это также рекомендуется, см. Здесь: fooobar.com/questions/55884/....

Ответ 6

Я думаю, что было бы лучше сохранить привязку все время и просто обновить связанные с ней данные. Я столкнулся с этой проблемой и обнаружил, что просто вызов с использованием метода .resetAll() в массиве, в котором я хранил данные, был самым эффективным способом для этого.

В принципе, вы можете начать с некоторого глобального var, который содержит данные, которые будут отображаться через ViewModel:

var myLiveData = ko.observableArray();

Мне потребовалось некоторое время, чтобы понять, что я не мог просто сделать myLiveData нормальный массив - часть ko.oberservableArray была важна.

Затем вы можете пойти и сделать все, что хотите, myLiveData. Например, сделайте вызов $.getJSON:

$.getJSON("http://foo.bar/data.json?callback=?", function(data) {
    myLiveData.removeAll();
    /* parse the JSON data however you want, get it into myLiveData, as below */
    myLiveData.push(data[0].foo);
    myLiveData.push(data[4].bar);
});

Как только вы это сделаете, вы можете продолжить и применять привязки с помощью ViewModel, как обычно:

function MyViewModel() {
    var self = this;
    self.myData = myLiveData;
};
ko.applyBindings(new MyViewModel());

Тогда в HTML просто используйте myData, как обычно.

Таким образом, вы можете просто отключить myLiveData от любой функции. Например, если вы хотите обновлять каждые несколько секунд, просто оберните эту строку $.getJSON в функцию и вызовите setInterval на ней. Вам никогда не понадобится удалить привязку, если вы не забыли сохранить строку myLiveData.removeAll();.

Если ваши данные действительно огромны, пользователь даже не сможет заметить время между сбросом массива и последующим добавлением самых текущих данных.

Ответ 7

В последнее время у меня была проблема с утечкой памяти, а ko.cleanNode(element); не сделала этого для меня - ko.removeNode(element);. Утечка памяти Javascript + Knockout.js - Как убедиться, что объект уничтожается?

Ответ 8

Я обнаружил, что если модель представления содержит множество привязок div, лучшим способом очистить ko.applyBindings(new someModelView); является использование: ko.cleanNode($("body")[0]); Это позволяет динамически вызывать новый ko.applyBindings(new someModelView2);, не беспокоясь о предыдущей модели представления все еще привязаны.

Ответ 9

Задумывались ли вы об этом:

try {
    ko.applyBindings(PersonListViewModel);
}
catch (err) {
    console.log(err.message);
}

Я придумал это, потому что в Knockout я нашел этот код

    var alreadyBound = ko.utils.domData.get(node, boundElementDomDataKey);
    if (!sourceBindings) {
        if (alreadyBound) {
            throw Error("You cannot apply bindings multiple times to the same element.");
        }
        ko.utils.domData.set(node, boundElementDomDataKey, true);
    }

Итак, для меня это не проблема, связанная с тем, что ее ошибка не была обнаружена и не обработана...