создание динамического списка с jquery

Question

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

Сказав, что, на мой вопрос заключается в следующем:

Я хочу, чтобы создать список, который динамически изменяется. (в списке указаны имена пользователей, которые в настоящее время вошли в систему).

Предположим, что имена зарегистрированных пользователей хранятся в массиве = ["name1", "name2", "name3" ....] и что данные в массиве являются обновленными данными.

форма:

<div id="users"> 
    <ul class="list"> 
     <li> 
     <h3 class="name">name1</h3> 
     </li> 
     <li> 
     <h3 class="name">name2</h3> 
     </li> 
    </ul> 
    </div> 

как я могу изменить список, с помощью JQuery, чтобы отобразить имена образуют массив и динамически изменяться его содержание?

много спасибо.

Answer 1

Вам не нужно использовать событие. Когда вы получите обновленный список, вызовите метод обновления напрямую.

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

start_with.html

<div id="users"> 
    <ul class="list"> 
    <li> 
     <h3 class="name">name1</h3> 
    </li> 
    <li> 
     <h3 class="name">name2</h3> 
    </li> 
    </ul> 
</div> 

update_list.js

// Note: This method will clear any user selections and may cause other problems since the previous list is deleted and recreated. 
function update_list(updated_users) { 

    // clear the existing list 
    $('#users .list li').remove(); 

    $.each(updatedUsers, function(index,userName) { 
    $('#users .list').append('<li><h3 class="name">'+userName+'</h3></li>') 
    }); 

} 

example_1.js

// Get the updated list 
var updated_users = ["name1", "name2", "name3"]; 
// Update it 
update_list(updated_users); 

after_example_1.html

<div id="users"> 
    <ul class="list"> 
    <li><h3 class="name">name1</h3></li> 
    <li><h3 class="name">name2</h3></li> 
    <li><h3 class="name">name3</h3></li> 
    </ul> 
</div> 

example_2.js

// Example by AJAX get using a made-up URL 
$.get('http://api.example.com/users/active.json', function(data) { 
    // What you do with data depends on what the API returns... 
    // I'm assuming it returns an array of users. 
    // data = ['user1', 'user2', 'user3']; 

    update_list(data); 
}) 

after_example_2.html

<div id="users"> 
    <ul class="list"> 
    <li><h3 class="name">user1</h3></li> 
    <li><h3 class="name">user2</h3></li> 
    <li><h3 class="name">user3</h3></li> 
    </ul> 
</div> 

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

Answer 2

Связывание данных традиционно лучше всего обрабатывается другими библиотеками, такими как Knockoutjs. При этом есть способы, с помощью которых вы можете выполнить аналогичные результаты в jQuery. Один простой - просто публиковать событие, когда приходит наш обновленный список, и перестроил наш DOM.

(function() { 

    "use strict"; 

    var $list = $("#users .list"); 
    var tmplt = "<li><h3>{{name}}</h3></li>"; 

    $list.on("updatedList", updateList); 

    function updateList (event, names) { 
     $list.html($.map(names, function (name) { 
      return tmplt.replace(/{{name}}/, name); 
     }).join("")); 
    } 

    // Anytime you want to update, pass the new names into a trigger 
    $list.trigger("updatedList", [ [ "Bob", "Richard", "Kendra", "Jake" ] ]); 

}()); 

Демо: http://jsfiddle.net/wDFKC/1/

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

Например, если пользователь зарегистрирован в соответствии с нашим настоящим списком и нашим обновленным списком, нет причин, по которым мы должны удалить их запись, только чтобы добавить ее снова. Вы можете использовать jQuery вместе с Knockoutjs, так что эти две команды прекрасно работают вместе в приложении. Вы должны занять несколько минут и прочитать о преимуществах использования Observable Arrays.