форма на backbone

[zlodiak]

ребята, посмотрите пожалуйста на мой первый опыт работы с backbone:
https://jsfiddle.net/9t1cwfrv/7/

не совсем ли говнокод получился? что нужно исправлять в первую очередь?

конечно, форма простая, и без backbone её сделать было бы проще. но хотелось попробовать именно эту библиотеку

если удобнее, то можно пользоваться https://github.com/zlodiak/shippingCalculator1

[destus]

Молодец, в правильном направлении движешься. Код из 100500 коллбэков на jQuery надоел?

А зачем во вьюхах в tagName div прописывать? Он же вроде по дефолту идет? И зачем template, если по сути туда данные никакой модели не подставляются? Для читабельности кода?
Также советую использовать какой-нибудь таск-раннер, например Gulp, чтобы вот такого в production сборке не было

<script src="js/jquery/jquery.2.min.js"></script>    
<script src="js/bootstrap-3/js/bootstrap.min.js"></script> 
<script src="js/underscore-min.js"></script>
<script src="js/backbone-min.js"></script>

<script src="js/project/models/models.js"></script> 
<script src="js/project/views/calculatorViews.js"></script> 
<script src="js/project/views/widjetViews.js"></script> 
<script src="js/project/helper.js"></script>

Там все минифицировать, сжать, прогнать через rigger и получить аккуратный файлик.
Также хотелось бы увидеть под капотом использование фреймворка RequireJS для реализации AMD. Как всё подключается и оптимизируется написано тут

[armidoll]

Я бы в id и class префикс модуля прописывал (если нет особых требований или причин так не делать), проще потом будет разбираться, когда модулей много накопится.

допустим, имя модуля: "calc"

тогда получится что-то навроде:

// ---------- html ids ----------
"mainContainer" --> "calcMainContainer"
"contentContainer" --> "calcContentContainer"

// ---------- html class names ----------
"city_of_departure_container" --> "calc_city_of_departure_container"
"city_of_destination_container" --> "calc_city_of_destination_container"

[zlodiak]

Молодец, в правильном направлении движешься. Код из 100500 коллбэков на jQuery надоел?

А зачем во вьюхах в tagName div прописывать? Он же вроде по дефолту идет? И зачем template, если по сути туда данные никакой модели не подставляются? Для читабельности кода?
тут

это по привычке для порядка прописываю. одно время на питоне сидел долго, а там "явное лучше неявного")

grunt-ом умею пользоваться, но пока не лень по-быстрому ручками всё подключать

[zlodiak]

в общем то, что я разместил в первом посте дичь лютейшая. при первой же попытке усложнить калькулятор(а оринтируюсь я на конкретно этот пример) сложность кода начала увеличиваться неконтролируемо. поэтому я полностью переписал алгоритм валидации(создал отдельный класс, который при небольшой доработке можно использовать в любом другом проекте). результат вот:

http://prozaik.16mb.com/works/weeken..._Calculator_3/
https://github.com/zlodiak/shippingCalculator3

кому не сложно, критикуйте)

[destus]

zlodiak,
Вместо

this.$el.find('selector')

можно писать

this.$('selector')

Весьма приятный сахар.

Нашел в calcViews.js вот такой интересный момент

this.model.set({
      'departCity': departCity,
      'destinCity': destinCity,
      'shippOptionsWeight': shippOptionsWeight,
      'shippOptionsVolume': shippOptionsVolume
    });

Я понимаю что с точки зрения работы веб-приложения всё гуд. Но я не считаю такой подход правильным. Вы смешиваете логику данных с логикой представления. Каждый объект должен отвечать за сферу своей деятельности: представление - отображать данные модели. Более правильным будет вынести это отдельным методом самой модели и из представления вызывать этот метод. Ну или миксин из Backbone.Events делать и тригеррить пользовательские события, к счастью паттерн наблюдателя в Backbone сделан просто замечательно.

[destus]

Если интересен ES6 можно на новый стандарт переписать https://habrahabr.ru/post/283054/

[zlodiak]

интересно. спасибо

[armidoll]

Оригинальному калькулятору можно было бы еще прикрутить сохранение состояний через изменение хэша в URL, используя HTML5 history API. В контексте Backbone можно сделать через Router, изменение состояния привязать к onClick для какой-нить кнопки "Рассчитать", например.

В книге Single Page Web Applications представлен патерн "anchor interface pattern" ( там правда через плагин jQuery, но суть понятна ) на стр.109 подраздел "The anchor interface pattern"

Как destus писал выше, через requireJS построить архитектуру было бы здорово.
Пример можно также найти в книге "Backbone.js Applications" by Addy Osmani ( https://addyosmani.com/backbone-fund...uirejs-and-amd ).
У автора еще есть интересная книга по паттернам:
Javascript Design Patterns