Каков наилучший способ вставить «сложный» элемент на страницу из jQuery?

Question

У меня есть кнопка, которая получает некоторые данные с сервера, используя ajax, и когда это будет сделано, она должна добавить элемент в DOM.

Элемент для добавления будет выглядеть примерно так

<div class="SomeClass">
  <div class="SomeOtherClass">
    <span class="Name">name from server</span>
    <span class="Manufacturer">manufacturer from server</span>
  </div>
  <span class="Weight">weight from server</span>
</div>'

В моей функции jQuery, которая возвращает данные с сервера, каков наилучший способ создать эту структуру, поместить данные (имя, производителя и вес) с сервера в правильные места и поместить их в DOM. У меня это работает так:

$("#ItemList").append('<div class="SomeClass"><div class="SomeOtherClass"><span class="Name">' + value.name + '</span><span class="Manufacturer">' + value.manufacturer + '</span></div> ' +
                       '<span class="Weight">' + value.weight + '</span></div>');

Но это выглядит не очень хорошо, и трудно понять правильную структуру.

Каков наилучший способ сделать это чисто?

Answer 1

Если бы мне понадобилось несколько «версий» структуры, я бы добавил что-то вроде

<div class="SomeClass" id='SomeClassTemplate' style='display:none'>
   <div class="SomeOtherClass">
      <span class="Name">name from server</span>
      <span class="Manufacturer">manufacturer from server</span>
   </div>
   <span class="Weight">weight from server</span>
</div>

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

var newDiv = $("#SomeClassTemplate").clone();
newDiv.attr("id","whatever") 
// remember this id should be different for each instance. or you can remove it
.appendTo("whatever") // depends on where in DOM you want to insert it
.find(".name").html("My name");

newDiv.find('.manufacturer').html("my manufacturer);
newDiv.show();

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

Answer 2

Если вы хотите помнить о читабельности, тогда следующий подход является чистым и не выполняет никаких ненужных поисков jQuery для добавления контента.

var div = '<div class="someClass">' +
          '    <div class="SomeOtherClass">' +
          '        <span class="Name">' + value.name + '</span>' +
          '        <span class="Manufacturer">' + value.manufacturer + '</span>' +
          '    </div>' +
          '    <span class="Weight">' + value.weight + '</span>' +
          '</div>';

$('#itemList').append(div);

Answer 3

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

var div1 = $('<div class="colwrap_fof"></div>');        //THE COMPLEX DIV ITSELF
var div2 = $('<div class="homeimg"></div>');                
var div21 = $('<div id="backImageDiv'+fof_index+'" class="backDiv"></div>');
var div22 = $('<div id="frontImageDiv'+fof_index+'"  class="frontDiv"></div>');
div2.append(div21);
div2.append(div22);
div1.append(div2);
$("#df_background").append(div1);     // ADDING the complex div to the right place      

Приветствия,

Answer 4

Вы можете использовать шаблонный плагин jQuery .Но если это «лучший» способ, я не могу сказать.Использование шаблонов требует больше времени на обработку, но код более читабелен.Вы должны взвесить свою конкретную задачу.Но обратите внимание, что теперь она устарела в соответствии с Рекомендуемая библиотека JavaScript шаблон HTML для JQuery?

Answer 5

Вы можете использовать шаблон jQuery, как предлагал DanielB, ваш код будет выглядеть чище и, вероятно, проще в обслуживании, но подумайте о добавлении еще одного скрипта, который находится в бета-режиме, в вашем приложении.Стоит ли это того?

Я работаю таким образом, если HTML должен быть динамическим через jQuery или это небольшой кусок кода, например <div>Hello</div>, я бы использовал selector.append ().

если это HTML-код, как в вашем примере, я бы хотел сохранить его на HTML-странице как есть.

Для меня это действительно вопрос о том, что вы должны делать с HTML дальше.

Например, я использовал шаблоны jQuery в приложении для онлайн-чата, над которым я работал, что фактически помогло мне с обслуживанием.

Answer 6

может быть, вы можете попробовать jQuery Templates ?

Он все еще находится в бета-версии, но я считаю, что он широко используется.

(пример из документации)

<!DOCTYPE html>
<html>
<head>
  <style>
table { border-collapse:collapse; margin:8px; background-color:#f8f8f8; }
table td { border:1px solid blue; padding:3px; }
</style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
</head>
<body>

<button id="showBtn">Show movies</button><br/>
<table><tbody id="movieList"></tbody></table>

<script>
  var movies = [
  { Name: "The Red Violin", ReleaseYear: "1998", Director: "François Girard" },
  { Name: "Eyes Wide Shut", ReleaseYear: "1999", Director: "Stanley Kubrick" },
  { Name: "The Inheritance", ReleaseYear: "1976", Director: "Mauro Bolognini" }
  ];

var markup = "<tr><td colspan='2'>${Name}</td><td>Released: ${ReleaseYear}</td><td>Director: ${Director}</td></tr>"

/* Compile markup string as a named template */
$.template( "movieTemplate", markup );

/* Render the named template */
$( "#showBtn" ).click( function() {
  $( "#movieList" ).empty();
  $.tmpl( "movieTemplate", movies ).appendTo( "#movieList" );
});
</script>

</body>
</html>