Пример шаблона knockoutjs для приложений с несколькими представлениями

Question

Я создаю приложение, которое содержит два сложных, существенно разных (но с некоторыми общими компонентами) представления. Одно представление позволяет пользователю выполнять запросы и просматривать результаты поиска, а другое - обзор недавних действий. Связанный пример может быть приложением PIM, у которого есть экран электронной почты и экран контактов. Эти два набора операций весьма различны, но между ними также есть структурное сходство. Создавая свое приложение, я начал с просмотра результатов поиска. Теперь мне нужно создать второй, и я задаюсь вопросом о лучших методах организации кода.

Создаю ли я отдельный объект (я полагаю, модель подвидов) для каждого "вида" приложения и переключаюсь между ними с помощью привязок if / ifnot? Одна из общих черт между представлениями состоит в том, что у каждого есть прокручиваемый, фильтруемый, постраничный список объектов. Должен ли я попытаться вычленить различия между списками, чтобы у меня был общий интерфейс сортировки / фильтрации, или я просто создал два параллельных интерфейса, которые разделяют только мои пользовательские привязки?

Спасибо,

Ген

Answer 1

Есть несколько направлений, которые вы могли бы пойти с этим.

Один из вариантов - позвонить ko.applyBindings с различными моделями представления для отдельных элементов DOM, таких как:

var viewModelA = { name: "Bob" };
var viewModelB = { price: 50 };

ko.applyBindings(viewModelA, document.getElementById("aContainer"));
ko.applyBindings(viewModelB, document.getElementById("bContainer"));

http://jsfiddle.net/9abgxn8k/

В этом случае вы хотели бы убедиться, что элементы не являются предками друг друга (не хотите связывать что-либо дважды)

Другой вариант - использовать модели подвидов:

var subModelA = { name: "Bob" };
var subModelB = { price: 50 };

var viewModel = {
  subModelA: { name: "Bob" },
  subModelB: { price: 50 }
};

ko.applyBindings(viewModel);

В этом методе вы бы тогда использовали with привязки к областям, которые вы хотите отобразить с каждой моделью представления. Вы можете управлять видимостью с помощью флагов на подмоделях или на верхней модели.

Еще один вариант, который мне нравится, это придать вашим "взглядам" немного структуры и сделать что-то вроде:

var View = function(title, templateName, data) {
   this.title = title;
   this.templateName = templateName;
   this.data = data; 
};

var subModelA = {
    items: ko.observableArray([
        { id: 1, name: "one" },
        { id: 2, name: "two" },
        { id: 3, name: "three" }
      ])
};

var subModelB = {
    firstName: ko.observable("Bob"),
    lastName: ko.observable("Smith") 
};


var viewModel = {
    views: ko.observableArray([
        new View("one", "oneTmpl", subModelA),
        new View("two", "twoTmpl", subModelB)
        ]),
    selectedView: ko.observable()    
};

ko.applyBindings(viewModel);

http://jsfiddle.net/rniemeyer/PctJz/