Knockoutjs работает с несколькими моделями представления - PullRequest
Новая
       31

Knockoutjs работает с несколькими моделями представления

13 голосов
/ 10 января 2012

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

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

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

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

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

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

JQM - Knockout Fiddle

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

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

Ответы [ 2 ]

22 голосов
/ 10 января 2012

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

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

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

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

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

1 голос
/ 30 апреля 2013

В настоящее время я использую jQuery Mobile 1.3.1 и Knockout 2.2.1 и перепробовал много подходов, прежде чем нашел (надеюсь) постоянное решение этой проблемы.Тяжелой частью является выяснение при для применения привязок.Когда я использовал функцию готовности jQuery, это не сработало.В документации jQM я обнаружил привязку к обратному вызову события pageinit вместо функции готовности документа.Однако этот обратный вызов срабатывает каждый раз, когда страница отображается впервые, поэтому, если у вас есть 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 выполняется поиск по моделям моего представления, чтобы найти связанную модель представления.с предстоящим видом и применяет привязки.Поскольку страницы инициализируются только при первом отображении, они будут применять ко-привязки при первом отображении и никогда больше.

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

...