Как структурировать одностраничное приложение с помощью knockout.js?

Мне больше всего интересно, как организовать такие вещи, как модальные окна и динамические страницы, такие как профили. Должен ли viewModel содержать только один профиль или содержать все профили? Это здесь просто не кажется очень "чистым".

viewModel = {
  profile: ko.observableArray([
    new ProfileViewModel()
    //... any others loaded
  ])
, createPostModal: {
    input: ko.observable()
  , submit: //do something to submit...
  }
}

<div data-bind="foreach: profile"><!-- profile html --></div>
<div data-bind="with: createPostModal"></div>

Этот путь не кажется очень последовательным. Есть ли кто-нибудь, кто создал одностраничное приложение с нокаутом, которое может предложить некоторые советы? Образцы кода будут оценены.

Ответы

Ответ 1

Мы только начинаем этот путь на работе, и поэтому не совсем уверены, что мы делаем. Но вот идея, которую мы имеем.

Страница должна состоять из любого количества "компонентов", возможно, вложенных. Каждый компонент имеет модель представления и один открытый метод renderTo(el), который по существу делает

ko.applyBindings(viewModelForThisComponent, el)

Он также может иметь возможность визуализации подкомпонентов.

Построение или обновление компонента состоит в предоставлении ему модели (например, данных JSON с сервера), из которой она будет выводить соответствующую модель представления.

Затем приложение создается путем вложения кучи компонентов, начиная с компонента приложения верхнего уровня.

Вот пример для "гипотетического" приложения для управления книгой. Компоненты LibraryUI (отображает список всех названий книг) и DetailsUI (раздел приложения, в котором отображаются сведения о книге).

function libraryBookViewModel(book) {
  return {
    title: ko.observable(book.title),
    showDetails: function () {
      var detailsUI = new BookDetailsUI(book);
      detailsUI.renderTo(document.getElementById("book-details"));
    }
  };
}

function detailsBookViewModel(book) {
  return {
    title: ko.observable(book.title),
    author: ko.observable(book.author),
    publisher: ko.observable(book.publisher)
  };
}

function LibraryUI(books) {
  var bookViewModels = books.map(libraryBookViewModel);
  var viewModel = {
    books: ko.observableArray(bookViewModels);
  };

  this.renderTo = function (el) {
    ko.applyBindings(viewModel, el);
  };
}

function BookDetailsUI(book) {
  var viewModel = detailsBookViewModel(book);

  this.renderTo = function (el) {
    ko.applyBindings(viewModel, el);
  };
}

Обратите внимание, как мы могли бы сделать информацию о книге появляться в диалоговом окне JQuery UI, а не в элементе singleton #book-details, изменив функцию showDetails, чтобы сделать

var dialogEl = document.createElement("div");
detailsUI.renderTo(dialogEl);
$(dialogEl).dialog();

Ответ 2

Существует 3 каркаса, которые помогают создавать SPA-системы с помощью Knockoutjs.

Я использовал Durandal, и мне это очень нравится. Прост в использовании и имеет много приятных конфигураций, поэтому вы можете подключать свои собственные реализации. Кроме того, Durandal создается тем же создателем Caliburn, который был очень популярной основой для создания приложений Silverlight/WPF.

Ответ 4

[обновить апрель 5, 2013] во время написания ответа был действительным. В настоящее время я также предлагаю подход Durandal JS как способ продвижения. Или проверьте "Шаблоны с горячим полотенцем или пастелью" Hot Towelette" от John Papa, если вы используете ASP.NET MVC. Это также использует Durandal.

Оригинальный ответ ниже:

Я хотел бы указать вам на серию Phillipe Monnets 4 о Knockout.js. Он первый блоггер, с которым я столкнулся, который разбивает свой примерный проект на несколько файлов. Мне очень нравятся его идеи. Единственное, что я пропустил, - это то, как обрабатывать коллекции ajax/rest, полученные с помощью своего рода шаблона репозитория/шлюза. Это хорошо читать.

Ссылка на часть 1: http://blog.monnet-usa.com/?p=354

Удачи!

Ответ 5

Я только открыла инфраструктуру mini SPA, которую я поставил вместе с Knockout основным компонентом.

Нокаут-сп Мини-(но полноценная) инфраструктура SPA, построенная на основе нокаута, требования, директора, сахара. https://github.com/onlyurei/knockout-spa

Live Demo: http://knockout-spa.mybluemix.net

Особенности

  • Маршрутизация (на основе Flatiron Director): история HTML5 (pushState) или хеш.
  • Очень сложный и многоразовый: выберите модули/компоненты для страницы в JS-странице, и они будут автоматически подключены для HTML-шаблона страницы.
  • SEO ready (prerender.io)
  • Быстрый и легкий (85 КБ JS, миниатюрный и gizpped)
  • Создание двухуровневой сборки для JS для производства: общий модуль, который будет использоваться большинством страниц, и модули для страниц, которые будут ленивыми.
  • Организованная структура папок, которая поможет вам оставаться здоровым для организации и повторного использования JS, CSS, HTML
  • Использование нокаута 3.3.0+, так что он готов к ноутауту для веб-компонента и пользовательских тегов (http://knockoutjs.com/documentation/component-overview.html)
  • Вся документация находится на собственных домашних страницах основных зависимостей, поэтому вам не нужно полностью изучать новую структуру