создание динамического списка с помощью jQuery

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

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

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

предположим, что имена зарегистрированных пользователей хранятся в массиве = ["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, чтобы отобразить имена из массива и динамически изменять его содержимое?

большое спасибо.

7
dynamic jquery

2 ответов

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

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

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>

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

6

привязка данных традиционно лучше всего обрабатывается другими библиотеками, такими как 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 вдоль side Knockoutjs, поэтому они хорошо работают вместе в приложении. Вы должны занять несколько минут и прочитать о преимуществах использования наблюдаемых Массивы.

1