Каков наилучший способ создания разметки HTML для каждого плейлиста?

Question

Мне было интересно, как я могу добиться следующего. Я использую Soundcloud API для импорта всех плейлистов на веб-сайт. Это я сделал с частью HTTP Soundcloud.

Теперь я хочу разместить каждый плейлист/альбом, включая трек-лист и обложку этого альбома внутри элемента div. Владелец этого альбома. Макет разметки прост: слева фигура держит обложку альбома, справа - неупорядоченный список с дорожками альбома.

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

То, что у меня есть сейчас. В моем HTML ди-держатель, который содержит все плейлист/альбомы. Чем он должен заполняться каждой функцией.

HTML

<div class="row albums"></div> <!-- All albums here --> 

JS

var albumHolder = $('.albums'); 
$(playlists).each(function(index, playlist) { 
    var playlistID = playlist.id; 

    albumHolder.append('<div id="#' + playlistID + '"></div>'); 

}); 

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

Итак, вкратце: я хотел бы использовать один и тот же макет каждый раз и генерировать это для каждого альбома внутри этого album div, который я создаю с помощью вышеуказанного кода.

Надеюсь, кто-то может мне помочь? Casper

Answer 1

лучший способ полностью зависит от характера вашего приложения!

Скажем, у вас есть только альбом и связанные песни только на всей странице, которую вы можете продолжить и переписывать HTML каждый раз!

Но если у вас есть другие компоненты на странице (например, меню, поле поиска и т. Д.), В этом случае не рекомендуется очищать всю страницу! Здесь вы должны переписать только parent-div из альбома и плейлиста. Таким образом, вам не нужно перезагружать другие вещи, и вы можете обеспечить лучший пользовательский интерфейс.

Надеюсь, это ответит на ваш вопрос.

UPDATE:

Чтобы заменить некоторые части HTML вы можете сослаться приведенный ниже код

$('#append').click(function(){ 
 
\t $('#container').append('<b> Hello </b>'); 
 
\t 
 
}); 
 
$('#replace').click(function(){ 
 
\t $('#container').html('<b> I am just replaced!</b>'); 
 
\t 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>I would like to say: <span id="container">I am the Dummy Text</span></p> 
 
<button id="replace">Replace Dummy Text</button> 
 
<button id="append">Append Hello</button>