Как пишутся Single page application из модулей?

Доброе время суток Community!
В учебных целях делаю приложение. В последующем проекте буду юзать Backbone.js + Require.js (таковы требования)

Что есть:
- Простинькое тестовое Туду приложение(Backbone.js) написанное в одном JS файле

Что необходимо:
- Разбить текущее приложение на модули средствами Require.js

Что сделано:
require.config. С этим все ясно прописываем пути, в shim добавляем бекбон и андерскор. Все по мануалу.
Разделяем объекты(модели, вьюхи... etc) по JS файлам. Объекты оборачиваем в define и отдаем в return.

Что непонятно:
44 ястрока

Почему во вью не передается коллекция я не понимаю.
Как инициализируеться приложение ? Как вьюха видит данные ?


Возможно у вас найдутся простенькие примеры подобного приложения и ответы на вопросы. Спасибо!
p.s. github гуглил там все достаточно наворочено то что мне попадалось
  • Вопрос задан
  • 838 просмотров
Решения вопроса 1
27cm
@27cm
TODO: Написать статус
Разберём подробнее, что происходит:

1. main.js
require([
    'backbone', 
    'views/app', 
    'routers/router'], 
function (Backbone, AppView, Workspace) {
	// ...
	new AppView();
});

Мы просто создаём представление AppView. Да мы вроде бы ничего в него не передаём при создании. Значит нужно идти дальше и разбираться, что происходит во views/app.

2. views/app.js
И вот тут мы уже видим в зависимостях и коллекцию todo моделей, и внутреннее представление для элемента todo:
define([
    'jquery',
    'underscore',
    'backbone',
    'collections/todos',              // <= Коллекция Todos
    'views/todos',                    // <= Представление для элемента todo
    'text!templates/stats.html',
    'common'
], function ($, _, Backbone, Todos, TodoView, statsTemplate, Common) {
    var AppView = Backbone.View.extend({
        // ...
    });
    return AppView;
});


Вот к какому выводу можно прийти:
Представление views/app создаётся только один раз. В нём жестко прописана зависимость от конкретной одной-единственной коллекции collections/todos, поэтому ничего передавать внутрь не нужно. Если бы у нас было несколько несвязных списков todo, пришлось бы убрать эту жесткую зависимость от коллекции collections/todos в views/app, и тогда мы бы действительно создавали несколько AppView, передавая в каждый свой экземпляр коллекции collections/todos.

3. views/app.js
Заглянув внутрь AppView, найдём пример создания нового представления TodoView с передачей внутрь новой модели:

4. collections/todos.js
Аналогично можно заглянуть внутрь коллекции collections/todos и увидеть там зависимость от models/todo и рассмотреть, как она там используется.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@bromzh
Drugs-driven development
Почему именно requirejs? Его использование сейчас оправдано разве что в старых проектах, для поддержки.
Переходи на webpack, например. Он умеет в es6-модули. Пишешь весь код, используя последние фишки es2015, а в вебпаке просто добавляешь babel-загрузчик. На выходе получается es5.
Вот пример.
Вот ещё
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы