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

Я создаю функциональность на веб-странице, которую пользователь может выполнять несколько раз. В результате действия пользователя объект / модель создается и применяется к HTML с помощью ko.applyBindings ().

HTML-код с привязкой к данным создается с помощью шаблонов jQuery.

Все идет нормально.

Когда я повторяю этот шаг, создавая второй объект / модель и вызывая ko.applyBindings (), я сталкиваюсь с двумя проблемами:

1. В разметке отображается предыдущий объект / модель, а также новый объект / модель.
2. Возникает ошибка javascript, связанная с одним из свойств объекта / модели, хотя он все еще отображается в разметке.

Чтобы обойти эту проблему, после первого прохода я вызываю jQuery .empty (), чтобы удалить шаблонный HTML, содержащий все атрибуты привязки данных, чтобы его больше не было в DOM. Когда пользователь запускает процесс для второго прохода, HTML-код с привязкой к данным повторно добавляется в DOM.

Но, как я уже сказал, когда HTML повторно добавляется в DOM и повторно привязан к новому объекту / модели, он по-прежнему включает данные из первого объекта / модели, и я все равно получаю ошибку JS, которая не возникает. во время первого прохода.

Вывод, по-видимому, таков, что Knockout сохраняет эти связанные свойства, даже несмотря на то, что разметка удалена из DOM.

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

РЕДАКТИРОВАТЬ

Основной процесс заключается в том, что пользователь загружает файл; затем сервер отвечает объектом JSON, HTML с привязкой к данным добавляется в DOM, затем объектная модель JSON привязывается к этому HTML с помощью

mn.AccountCreationModel = new AccountViewModel(jsonData.Account);
ko.applyBindings(mn.AccountCreationModel);

После того, как пользователь сделал выбор в модели, тот же объект отправляется обратно на сервер, связанный с данными HTML удаляется из DOM, а затем у меня появляется следующий JS

mn.AccountCreationModel = null;

Когда пользователь желает сделать это еще раз, все эти шаги повторяются.

Боюсь, что код слишком "запутан" для демонстрации jsFiddle.

Вы пробовали вызвать метод чистых узлов knockout для своего элемента DOM, чтобы избавиться от связанных с памятью объектов?

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

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

Для проекта, над которым я работаю, я написал простую ko.unapplyBindingsфункцию, которая принимает узел jQuery и логическое значение удаления. Сначала он отвязывает все события 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]);
    }
};

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

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

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

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

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

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

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

1. Определите привязки в 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>
     
   

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

   var storeViewModel = ko.mapping.fromJS(modelFromServer)

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

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

4. Свяжите модель представления верхнего уровня.

   ko.applyBindings(storeViewModel);

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

   storeViewModel.cartItemsViewModel(actualCartItemsModel);

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

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

Мне нужно вызывать 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>

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

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

По сути, вы можете начать с некоторой глобальной переменной, которая содержит данные для визуализации через 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();линию.

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

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

Вы думали об этом:

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);
    }

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

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