В JavaScript строку, которая содержит HTML код


Я ужасно с написание кода JavaScript, который выводит HTML-код. Вот как строковый литерал выглядит в проекте, я работаю над:

tweet = '<div class="h-ui-box">'

+ '<table>'

+ '<tr>'

+ '<td id="first">'
+ '<img src="' + item.profile_image_url + '" alt="' + item.from_user + '" width="56">'
+ '</td>'

+ '<td>'
+ '<section>'
+ '<header>'
+ '<h1><a href="http://twitter.com/'
+ (function(from_user) { 
    return from_user + '">' + from_user + '</a></h1>';
})(item.from_user)
+ '</header>'
+ '<article>' + item.text.twitterify() + '</article>'
+ '</section>'
+ '</td>'

+ '</tr>'

+ '</table>'

+ '<footer><a href="http://twitter.com/' + item.from_user + '/status/' + item.id.toString() + '" target="_blank">' + item.created_at + '</a></footer>'
+ '</div>';

Как бы я идти о том, чтобы улучшить это?



380
1
задан 14 июня 2011 в 09:06 Источник Поделиться
Комментарии
4 ответа

Сделайте себе "шаблон", что вы сразу конвертировать в HTML (через innerHTML или как там ваши основы под рукой), а затем использовать дом для исправления нескольких переменных биты. Вы можете использовать идентификаторы, чтобы найти теги, которые нуждаются в замене, если вы можете гарантировать, что они являются уникальными. В противном случае использование XPath.

4
ответ дан 14 июня 2011 в 10:06 Источник Поделиться

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

3
ответ дан 14 августа 2011 в 12:08 Источник Поделиться

У меня было много успехов с jQuery шаблоны в прошлом.

Например:

var markup='<tr><td>${id}</td><td><a href="/index/tender/id/${id}">${title}</a></td><td {{if days_left <1}} class="label warning" {{/if}} >${days_left}</td></tr>';    

$.template( "templateTenders", markup ); //compile the markup as a jquery.template

//....get json data - via an ajax call
$.tmpl("templateTenders", data).appendTo( "#tenderlist" ); //data is a JSON data object (assoc array) that comes in via ajax.

[править]

Я с тех пор перешел на использование mustasche.js и это замечательно.

[править 2013]

Я с тех пор перешел на использование handlebar.js(https://stackoverflow.com/questions/4392634/mustache-js-vs-jquery-tmpl/9481181#9481181), которая даже более прекрасным, и гораздо быстрее, чем mustache.js

3
ответ дан 7 декабря 2011 в 11:12 Источник Поделиться

В этой области я сделал много работы в последнее время.

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

if (!String.prototype.supplant) {
String.prototype.supplant = function (o) {
return this.replace(/{([^{}]*)}/g,
function (a, b) {
var r = o[b];
return typeof r === 'string' || typeof r === 'number' ? r : a;
}
);
};
}

(Спасибо Дугласа Крокфорда)

Вы бы использовать его как это:

param = {domain: 'valvion.com', media: 'http://media.valvion.com/'};
url = "{media}logo.gif".supplant(param);

Так что ваш шаблон-это строка разметки, с заполнителями имени свойства объекта.
Этот подход немного опрятнее, чем встраивание все, но все равно не смягчить, немного грязный ощущение того, что разметки в JS строки.

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

Помощью JsRender такое jQuery-независимый, очень быстрый, гибкий и использует шаблоны, которые объявляются в качестве элементов разметки страницы, а не в JS строки.

Он имеет некоторые классные условную логику и другие полезные функции.

Я бы предложил, это было бы способом пойти.
Надо помнить, однако, что помощью JsRender в настоящее время пре-бета. Я только начал использовать его для конкретного проекта, и это действительно работает хорошо для меня.

1
ответ дан 7 декабря 2011 в 03:12 Источник Поделиться