Задать background элементам генерируемым динамически (rivets.js)
 

Динамически генерирую и вывожу контент из

categoryModel

по средствам MVC rivets.js

var gallery = document.getElementById('gallery');

var categoryModel = {
	col1: [
		{categoryName: 'Category 1', categoryImg: 'url', categoryStyle: true, categoryId: 'tt'},
		{categoryName: 'Category 2', categoryImg: 'url', categoryStyle: true, categoryId: 'dd'}
	],
	col2: [
		{categoryName: 'Category 3', categoryImg: 'url'},
		{categoryName: 'Category 4', categoryImg: 'url'},
		{categoryName: 'Category 5', categoryImg: 'url'}
	]
};


var setImg = function () {
	var a = categoryModel.col1;
	for (var i = 0; i < a.length; i++) {
		var b = a[i].categoryName;
		console.log(b);
	};

	var div = document.getElementById('test');
	var el = div.getElementsByTagName('*');
		for(var i=0; i<el.length; i++) {
			el[i].id = b;
		};
};

setImg();
rivets.bind(gallery, {'categoryModel': categoryModel});

Данной конструкцией

var setImg = function () {
	var a = categoryModel.col1;
	for (var i = 0; i < a.length; i++) {
		var b = a[i].categoryName;
		console.log(b);
	};

	var div = document.getElementById('test');
	var el = div.getElementsByTagName('*');
		for(var i=0; i<el.length; i++) {
			el[i].id = b;
		};
};

пытаюсь присвоить id для каждого сгенерированного элемента, но в результате задает всем элементам одинаковый id. как сделать что бы присваивало каждому элементу свой id, имя которого я беру из categoryName.

Таким образом, хочу присвоить каждому блоку свой background. Возможно есть более правильный и логичный способ чем данный?

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

Все заработало, просто нужно было вынести саму функцию setImg за пределы области rivets, так как на тот момент элементы еще не построены и скрипт и не будет работать правильно!

falkone,
так и берите
el[i].id = a[i].categoryName;

зачем нужны строки 3 -6 они же ничего полезного не делают.

Так и есть, убрал их, в процессе неудачных попыток добавились они.

Финальный вариант выглядит вот так

var setImg = function () {
	var a = categoryModel.col1;
		var div = document.getElementById('test');
		var elems = div.getElementsByTagName('*');
		for(var i=0; i<elems.length; i++) {
			elems[i].id = a[i].categoryName;
		};

};
setImg();

Переделал в более простую и правильную конструкцию

var setImg = function () {
	var a = categoryModel.col1;
		var div = document.getElementById('test');
		var elems = div.getElementsByTagName('*');
		for(var i=0; i<elems.length; i++) {
			elems[i].style.background = a[i].categoryImg;
		};
};
setImg();

Думаю в будущем можно сделать кастомный байндер для большего удобства вывода изображений.

Как-то не вяжется пафос MVC на js и баян var elems = div.getElementsByTagName('*');

То есть все что в div'е? то есть div.children, в смысле текстовых нод от рендера в js и быть не может...

как связано это и это да в var elems текстовых нод быть не может

Да согласен, пока это временное решение, с планами переделать под кастомный binders в rivets.js.


Здесь лежат дочерние div-и, которым уже и задаем background.