Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.06.2015, 20:03
Аспирант
Отправить личное сообщение для falkone Посмотреть профиль Найти все сообщения от falkone
 
Регистрация: 27.09.2014
Сообщений: 42

Задать 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. Возможно есть более правильный и логичный способ чем данный?
Ответить с цитированием
  #2 (permalink)  
Старый 01.06.2015, 20:07
Аспирант
Отправить личное сообщение для falkone Посмотреть профиль Найти все сообщения от falkone
 
Регистрация: 27.09.2014
Сообщений: 42

Если кому нужно в живую взглянуть, могу прикрепить исходник для наглядности.
Ответить с цитированием
  #3 (permalink)  
Старый 01.06.2015, 20:28
Аспирант
Отправить личное сообщение для falkone Посмотреть профиль Найти все сообщения от falkone
 
Регистрация: 27.09.2014
Сообщений: 42

Все заработало, просто нужно было вынести саму функцию setImg за пределы области rivets, так как на тот момент элементы еще не построены и скрипт и не будет работать правильно!
Ответить с цитированием
  #4 (permalink)  
Старый 01.06.2015, 20:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

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

зачем нужны строки 3 -6
Сообщение от falkone
Данной конструкцией
они же ничего полезного не делают.
Ответить с цитированием
  #5 (permalink)  
Старый 01.06.2015, 20:49
Аспирант
Отправить личное сообщение для falkone Посмотреть профиль Найти все сообщения от falkone
 
Регистрация: 27.09.2014
Сообщений: 42

Сообщение от рони Посмотреть сообщение
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();
Ответить с цитированием
  #6 (permalink)  
Старый 01.06.2015, 20:58
Аспирант
Отправить личное сообщение для falkone Посмотреть профиль Найти все сообщения от falkone
 
Регистрация: 27.09.2014
Сообщений: 42

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

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();


Думаю в будущем можно сделать кастомный байндер для большего удобства вывода изображений.
Ответить с цитированием
  #7 (permalink)  
Старый 01.06.2015, 22:47
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

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

То есть все что в div'е? то есть div.children, в смысле текстовых нод от рендера в js и быть не может...
Ответить с цитированием
  #8 (permalink)  
Старый 01.06.2015, 22:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Сообщение от kostyanet
в смысле текстовых нод от рендера в js и быть не может
как связано это и это
Сообщение от kostyanet
getElementsByTagName
да в var elems текстовых нод быть не может
Ответить с цитированием
  #9 (permalink)  
Старый 01.06.2015, 23:03
Аспирант
Отправить личное сообщение для falkone Посмотреть профиль Найти все сообщения от falkone
 
Регистрация: 27.09.2014
Сообщений: 42

Сообщение от kostyanet Посмотреть сообщение
Как-то не вяжется пафос MVC на js и баян var elems = div.getElementsByTagName('*');
Да согласен, пока это временное решение, с планами переделать под кастомный binders в rivets.js.


Сообщение от kostyanet Посмотреть сообщение
div.getElementsByTagName('*');
Здесь лежат дочерние div-и, которым уже и задаем background.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Обращение к динамически созданным элементам. platedz Элементы интерфейса 36 04.10.2012 13:04
как получить доступ к динамически созданным html элементам? korney Элементы интерфейса 8 21.01.2012 22:12
Оцените, пожалуйста код вёрстки OlegALL Ваши сайты и скрипты 18 26.07.2011 09:35
Привязка событий к динамически созданным элементам htaccess Общие вопросы Javascript 5 10.05.2011 22:36
задать Background активной ссылки по ID Funkyou Элементы интерфейса 13 26.11.2010 11:16