Пример шаблона нокаута для многозадачных приложений

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

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

Спасибо,

Gene

ОТВЕТЫ

Ответ 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/