Knockoutjs, работающий с несколькими моделями просмотра

Я пытаюсь заставить Knockout js работать с jQueryMobile и нажимать несколько проблем при перемещении между страницами.

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

Документация по переходу страницы JQM

У меня есть две отдельные страницы Knockoutjs, работающие как с отдельной моделью просмотра для каждого. Обе страницы работают отлично, пока я не попытаюсь связать их вместе через JQM.

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

Я попытался сделать jsFiddle, чтобы продемонстрировать это.

JQM - скрипка для нокаута

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

Будет ли лучше пытаться использовать один ViewModel для всего сайта? Если нет, то как я могу использовать Knockoutjs с JQM?

Ответ 1

Одна модель "мастера" для всего сайта будет приемлемой. Затем вы можете сделать что-то вроде этого:

var masterViewModel = {
   viewModelOne: ...,
   viewModelTwo: ...
}

В качестве альтернативы вы можете вызвать перегрузку .applyBindings, чтобы применить привязки к отдельным элементам, а не ко всей DOM:

ko.applyBindings(new modelOne("Test", "One"), $("#one")[0]);
ko.applyBindings(new modelTwo("Test", "Two"), $("#two")[0]);

Лично я бы рекомендовал второй подход.

Ответ 2

В настоящее время я использую jQuery Mobile 1.3.1 и Knockout 2.2.1 и пробовал много подходов, прежде чем найти (надеюсь) постоянное решение этой проблемы. Жесткая часть вычисляет , когда применяется привязка. Когда я использовал функцию jQuery ready, это не сработало. Я нашел в jQM documentation для привязки к обратному вызову eventinit события вместо функции готовности документа. Однако этот обратный вызов отключается каждый раз, страница отображается в первый раз, поэтому, если у вас есть 5 jQM-страниц, ее можно запустить 5 раз, и вы должны использовать привязки KO только один раз.

В конечном итоге я использовал следующее решение:

$(document).bind('pageinit', function (e) {
    var pageId = e.target.id;

    for (var i in VIEW_MODELS) {
        var vm = VIEW_MODELS[i];
        if (pageId == vm.View) {
            ko.applyBindings(vm, document.getElementById(vm.View));
        }
    }
});

Что это делается, каждый раз, когда страница jQM изначально отображается, она просматривает мои модели просмотра, чтобы найти модель представления, связанную с предстоящим представлением, и применяет привязки. Поскольку страницы только инициализируются при первом рендеринге, они будут применять привязки ko при первом рендеринге и никогда больше.

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