Як очистити / видалити помітні прив’язки в Knockout.js?

Я будую функціональність на веб-сторінці, яку користувач може виконувати кілька разів. За допомогою дії користувача об’єкт / модель створюється та застосовується до HTML за допомогою ko.applyBindings ().

Обмежений даними HTML створюється за допомогою шаблонів jQuery.

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

Коли я повторюю цей крок, створюючи другий об'єкт / модель і викликаю ko.applyBindings (), у мене виникають дві проблеми:

1. Розмітка показує попередній об'єкт / модель, а також новий об'єкт / модель.
2. Відбувається помилка javascript, що стосується одного з властивостей об'єкта / моделі, хоча він все ще відображається в розмітці.

Щоб вирішити цю проблему, після першого проходу я закликаю jQuery's .empty (), щоб видалити шаблонний HTML, який містить усі атрибути прив'язки даних, так що він більше не знаходиться в DOM. Коли користувач запускає процес другого проходу, пов'язаний з даними HTML знову додається до DOM.

Але, як я вже говорив, коли HTML знову додається до DOM і знову прив'язується до нового об'єкта / моделі, він все ще включає дані першого об'єкта / моделі, і я все одно отримую помилку JS, яка не виникає під час першого проходу.

Здається висновок, що нокаут тримається за ці зв'язані властивості, навіть якщо розмітка видалена з DOM.

Тож те, що я шукаю, - це засіб видалити ці пов'язані властивості з нокауту; кажучи нокаутом, що моделі більше не спостерігається. Чи є спосіб це зробити?

EDIT

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

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

Після того, як користувач здійснив кілька виборів на моделі, той самий об'єкт буде розміщений назад на сервері, пов'язаний з даними HTML видаляється з цього пункту DOM, і я отримую наступний JS

mn.AccountCreationModel = null;

Коли користувач бажає зробити це ще раз, всі ці дії повторюються.

Я боюся, що код занадто "задіяний", щоб зробити демо jsFiddle.

Ви спробували викликати метод чистого вузла нокауту на елементі 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]);
    }
};

Ви можете спробувати скористатися прив'язкою, яку пропонує нокаут: 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);

Нокаут подбає про html - тобто він з’явиться, коли модель не буде порожньою, а вміст div (той із "з прив'язкою") зникне.

Мені потрібно зателефонувати ko.applyЗв'язуючи кожен раз, коли натискати кнопку пошуку, і відфільтровані дані повертаються з сервера, і в цьому випадку слід працювати за мною, не використовуючи 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);
}

Я придумав це, тому що в нокауті я знайшов цей код

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

Тож для мене це насправді не проблема, яка її вже пов'язана, це те, що помилка не була спіймана і не вирішена ...

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