erstellen von dynamischen Liste mit jquery

lassen Sie mich beginnen, indem ich sagte, ich sah ähnliche Fragen im forum, aber ich habe keins gefunden was mir auch gelungen ist, Sie zu verstehen und anwenden zu meiner situation.

Having said that, meine Frage lautet wie folgt:

Möchte ich eine Liste aufbauen, die sich dynamisch ändert. ( die Liste zeigt die Namen von Usern, die gerade eingeloggt sind).

Lassen Sie uns sagen, dass die Namen der angemeldeten Benutzer gespeichert sind in ein array = ["name1", "name2", "name3" ....] und dass die Daten im array die Daten aktualisiert werden.

form ist:

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

wie kann ich änderungen an der Liste, mit jquery, um die Anzeige der Namen für das array dynamisch ändern, indem es die Inhalte?

vielen Dank.

  • Sie haben die ul-element auf der Seite schon oder, die müssen auch erstellt werden?
  • Dies ist ein besserer job für so etwas wie knockoutjs als nur jQuery
  • Was du redest, ist die Datenbindung, die in der Regel behandelt, am besten von einem anderen tool, wie knockoutjs, als Jamiec oben angegeben.
  • ich dachte an etwas wie: Holen Sie sich die Daten fron der server jede Sekunde und wenn das passiert, ist die Liste aktualisieren. Sie sagen, jqurey können nicht mit solchen Dingen?
  • Sicher jQuery tun können, aber Sie werden am Ende das schreiben von Lasten-code zum synchronisieren der Daten mit der UI. ein databinding-lib wird die meisten, dass die Arbeit für Sie!
InformationsquelleAutor mosh | 2013-12-19
  1. 7

    Sie nicht wirklich brauchen, um eine event. Wenn Sie die aktualisierte Liste, rufen Sie die update-Methode direkt.

    Jedoch, wie andere Benutzer haben darauf hingewiesen, die Verwendung eines data-binding-Bibliothek könnte besser sein.

    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>

    Hinweis: Ein Nachteil dieser Methode ist, dass die alte Liste zerstört wird. Dies bedeutet, dass wenn Ihre Liste Eingabefeldern, zum Beispiel, Ihre Benutzer eingegebene Inhalt zerstört würde auf update. Wenn Sie haben, geben Sie in Ihrer Liste haben, müssen Sie eine andere Methode verwenden, um die Liste zu aktualisieren, wenn Sie wollen auch bewahren, den Zustand der Elemente.

    • var update_list(updated_users) sollte die Funktion update_list(updated_users) {
    • Behoben. Danke @Sibish!
    InformationsquelleAutor Nate
  2. 1

    Daten-Bindung wird traditionell behandelt, am besten von anderen Bibliotheken, wie Knockoutjs. Dass gesagt wird, dass es Möglichkeiten gibt, Sie zu erreichen ähnliche Ergebnisse in jQuery. Eine einfache ist nur zu veröffentlichen, ein Ereignis, wenn unsere aktualisierte Liste kommt, und wieder aufgebaut und unser DOM aus, dass.

    (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" ] ] );

}());

    Demo: http://jsfiddle.net/wDFKC/1/

    Bitte beachten Sie, dass, während Sie können dies tun, mit jQuery, ist es am besten behandelt, die von anderen tools wie Knockoutjs. Der Grund dafür ist, dass andere Werkzeuge sind ein bisschen schlauer werden und Entscheidungen darüber, welche Teile des DOM geändert werden müssen.

    Zum Beispiel, wenn ein Benutzer angemeldet ist nach unserem heutigen Liste, und unsere aktualisierte Liste, es gibt keinen Grund, warum sollten wir entfernen Ihren Eintrag, nur um es erneut hinzuzufügen. Sie können an der Seite von jQuery Knockoutjs, so dass die zwei arbeiten gut zusammen in einer app. Nehmen Sie sich bitte einige Minuten Zeit und Lesen Sie über die Vorteile der Verwendung Observable Arrays.

    InformationsquelleAutor Sampson
Schreibe einen Kommentar