Как эффективно внедрить переменные j / s в повторно используемый блок HTML, не смешивая их в файле aj / s?

Question

По сути, у меня есть функция автозаполнения, чтобы помочь пользователям выбрать элемент. Когда они выбирают элемент, серия переменных, относящихся к элементу, сохраняется. Как только они нажимают «добавить», переменные затем внедряются в шаблон HTML, а шаблон HTML внедряется в DOM. У меня вопрос: как я могу это сделать, не смешивая мой HTML-код с кодом j / s, т.е. var example = "<div id='" + divId + "'></div>"; (и т. Д.) Надеюсь, вопрос достаточно ясен.

Answer 1

Вы смотрели на Шаблоны jQuery ?Это в основном привязка данных на стороне клиента, что похоже на то, что вы пытаетесь сделать.

Например, вы можете делать такие вещи, как это ..

Предполагая, что у вас есть список объектов Song,определяется как:

var song = {
  title : 'Purple Rain',
  artist : 'Prince'
};

HTML:

<!-- Template definition -->
<script id="tmpl_songList" type="text/html">
  <li>
    <a>
        <span>${title}</span>
        <span>${artist}</span>
    </a>
  </li>
</script>

<!-- HTML container to host data-bound list -->
<ul id="song_list"></ul>

JS:

// bind data (songList) and append to HTML container.
$.tmpl($('#tmpl_songList'), songList).appendTo($('#song_list'));

Answer 2

Попробуйте:

var myID = "id";
var myText = "Some Text"
$('<div/>', {
    id: myID,
    html: myText
  }).appendTo('body');

При необходимости вы можете добавить дополнительные свойства.

С другой стороны, если ваши манипуляции сложны, используйте шаблонизатор.Это проще в обслуживании.

Answer 3

Вы можете сделать:

var example = $("<div />").attr("id",divId);

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