aen

threejs.org

Сам термин "удобные" весьма субъективен. Кроме того, я не устаю повторять, что "серебряной пули" нет. Не существует идеального фреймворка. Смотреть нужно другие обязательно, хотя бы только для того, чтобы понимать, что какие то ваши задачи можно решить иначе. Это очень расширяет мышление.

Мне довелось наблюдать "backbone" головного мозга. Когда разработчик так привык к backbone, что всю логику строил только на сущностях этой библиотеки. И когда у него возникали проблемы с этим, то вместо того, чтобы использовать какие-то нативные js-инструменты, он просто обвешивал лапшой модельки и коллекции.

У того же backbone есть приличное количество расширений и плагинов. Изучите их. Порой они решают достаточно сносно некоторые задачи.

Тот же React.js вполне можно использовать в качестве замены Backbone.View. Так же есть идеи о применении подхода Flux при разработке на Marionette. Тоже полезно для ознакомления. Где-то мне на глаза попадался Backbone.Dispatcher.

Суть: ищите и обрящите. От себя могу добавить только вот эту мою подборку ресурсом в Backbone.

Вообще лучше всего соблюдать правило "Одна модель - одна вьюха". В вашем случае, это первый вариант. Тогда старшая вьюха Vote будет играть роль лэйаута. При условии, что не стоит размазывать модель на две вьюхи.

Вообще есть приличное количество материалов по работе с вложенными вьюхами в backbone. В marionette.js для вашего случая есть даже готовые сущности: Region и LayoutView.

Гуглите фразу masonry layout. Например, masonry.desandro.com

visionmedia.github.io/page.js

Метод each итерирует объект по его свойствам, либо массив по элементам. В вашем случае итерирование происходит по объекту. Вот только модели коллекции лежать в свойстве models вашей коллекции. Потому итерируйте по нему. То есть:

_.each(col1.models, function(val, key){
    console.log( key, val )  
  })

Для удобства работы можно создать свой "класс" коллекций и расширить его методом each:

var Collection = Backbone.Collection.extend({
  each: function (fn) {
    _.each(this.models, fn);
  }
});

var myColl = new Collection();

// Итерирование
myColl.each(function(model) {
    // какая-то логика работы с моделью
});

Вот до тех пор пока все будут учить фреймворки, а не принципы проектирования и то как работает браузер, у нас и будут появляться быдлокодеры. Это мысли в слух. Не в обиду автору.

Фреймворк это просто инструмент. Он за вас решит ряд вопросов. Позволит какие-то фичи сделать быстрее за счет того, что они уже были решены ранее. Но любой фреймворк можно изучить и применять за приемлемое время при условии, что у вас будут достаточно прокачанные скиллы по js, по тому как работает браузер, по тому как передается информации между клиентов и сервером (сокеты, xhr, cors и прочие свистелки).

Если вы новичок, то просто пишите код. Ставьте задачи. Смотрите как эти задачи решены были ранее в рамках любого фреймворка или библиотеки, прочитайте исходники.

Фреймворки, к сожалению, весьма подвержены моде. Раньше был тренд на Backbone.js, затем под ореолом Гугла все подхватили Angular.js, сейчас начинается повальное увлечение React.js. Завтра появится, что то новое, все кинутся на него.

Если вы хотите максимально быстро зарабатывать, то посмотрите требования в вакансиях. Рынок сам вам скажет, что ему нужно.

Если вы хотите просто прокачаться, но посмотрите примеры решения типовой задачи TodoMVC на разных фреймворках. Выберите то, что вам будет понятнее всего.

А человек, который на ваш вопрос "Что мне изучать?" быстро и легко назовет имя любого фреймворка, скорее всего сам еще недостаточно прокачался, потому как он видимо не понимает, что нет "серебряной пули". Нет идеального фреймворка, который бы решал все ваши задачи.

Вам разве не хватает равенства window === document.defaultView?
document.defaultView это просто ссылка на window.

Вам не хватает одного шага. Нужно или создать еще один файл с импортами блоков и уже его билдить в css, или билдить каждый файл по отдельности и потом их уже склеивать в один. Какой удобнее вам - выбирайте сами.