Как переустановить модель просмотра нокаутом, когда страница загружается как частичная с помощью ajax?

Question

На странице, с которой я работаю, есть пара вкладок, и содержимое каждой вкладки загружается через ajax, запросив частичный вид с контроллера. Проблема в том, что частичный вид использует knockoutjs, поэтому он привязан к модели представления. В этом конкретном сценарии страница загружается полностью в первый раз, так что все привязки работают нормально. При переключении вкладок он запрашивает частичное представление и заменяет область содержимого вкладки на новую страницу. Когда вы вернетесь к первой вкладке, она будет успешно загружать частичную, за исключением того, что все привязки нокаута были потеряны, поэтому есть много отсутствующих данных.

Я не могу поместить объявление viewmodel и привязку модели в частичном, потому что jquery не был загружен этой точкой. Или так казалось ($ не определено).

Модель просмотра объявлена ​​и привязана к главной странице, которая вызывает частичное представление, а не частичное представление, поэтому я думал, что модель все равно будет доступна и будет успешно связываться, но это не так. Я знаю, что я делаю это неправильно, и частичное представление очень неудобно, когда дело доходит до javscript, поэтому я надеюсь украсть у вас немного понимания у вас, ребята.

Вот основные настройки:

Answer 1

Если вы способны связываться со специфическими неперекрывающимися областями страницы, то вы можете выбрать, чтобы позвонить ko.applyBindings(someViewModel, someDomElement) как в этом ответе: Can you call ko.applyBindings to bind a partial view?

Однако, если у вас есть общая модель просмотра, привязанная к странице, а затем «острова» контента, загружаемого через частичное, которое вы хотите связать позже, тогда один из вариантов должен был бы сделать что-то вроде этого: http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html. Таким образом, вы установили привязку в контейнере, где ваши частичные передачи, которые сообщают Knockout, держать руки от этой области. Затем, когда вы загружаете частичное, вы можете безопасно позвонить ko.applyBindings(someViewModel, innerContainer).

Связывание может выглядеть следующим образом:

ko.bindingHandlers.stopBinding = { 
    init: function() { 
     return { controlsDescendantBindings: true }; 
    } 
}; 

и вы бы использовать его как:

<div id="outerContainer" data-bind="stopBinding: true"> 
    <div id="innerContainer"> 
    ...load your partial here 
    </div> 
</div> 

Затем ko.applyBindings(someViewModel, document.getElementById("innerContainer"));