使用 jquery 创建动态列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20685492/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
creating dynamic list with jquery
提问by mosh
let me start by saying that i saw similar questions on forum, however i didn't find one which i managed to understand and apply to my situation.
首先让我说我在论坛上看到了类似的问题，但是我没有找到我设法理解并适用于我的情况的问题。
Having said that, my question is as follows:
话虽如此，我的问题如下：
I want to build a list which dynamically changes. ( the list shows the names of useres who are currently logged in).
我想建立一个动态变化的列表。（列表显示当前登录的用户名）。
Let's say that the names of the logged in users are stored in an array = ["name1", "name2", "name3" ....] and that the data in the array is the updated data.
假设登录用户的姓名存储在数组 = ["name1", "name2", "name3" ....] 中，数组中的数据是更新后的数据。
the form is:
表格是：
<div id="users">
<ul class="list">
<li>
<h3 class="name">name1</h3>
</li>
<li>
<h3 class="name">name2</h3>
</li>
</ul>
</div>
how can i modify the list, using jquery, to display the names form the array and dynamically change by it's content?
如何使用 jquery 修改列表以显示数组中的名称并根据其内容动态更改？
many thanks.
非常感谢。
回答by Nate
You don't really need to use an event. When you get the updated list, call the update method directly.
你真的不需要使用事件。拿到更新后的列表后，直接调用update方法。
However, as other users have indicated, using a data-binding library might be better.
但是，正如其他用户所指出的，使用数据绑定库可能会更好。
start_with.html
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
更新列表.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
示例_1.js
// Get the updated list
var updated_users = ["name1", "name2", "name3"];
// Update it
update_list(updated_users);
after_example_1.html
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
示例_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
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>
Note: One drawback to this method is that the old list gets destroyed. This means that if your list has input boxes, for example, their user-entered content would be destroyed on update. If you have state in your list, you'll have to use a different method to update the list if you also want to preserve the state of elements.
注意：此方法的一个缺点是旧列表会被破坏。这意味着，例如，如果您的列表具有输入框，则其用户输入的内容将在更新时销毁。如果您的列表中有状态，并且您还想保留元素的状态，则必须使用不同的方法来更新列表。
回答by Sampson
Data-binding is traditionally handled best by other libraries, such as Knockoutjs. That being said, there are ways in which you can accomplish similar results in jQuery. One simple one is to merely publish an event when our updated list comes in, and rebuilt our DOM from that.
数据绑定传统上最好由其他库处理，例如 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" ] ] );
}());
Demo: http://jsfiddle.net/wDFKC/1/
演示：http: //jsfiddle.net/wDFKC/1/
Please note that while you can do this with jQuery, it is best handled by other tools like Knockoutjs. The reason being is that other tools are a bit smarter, and will make decisions about which parts of the DOM need to be changed.
请注意，虽然您可以使用 jQuery 执行此操作，但最好由其他工具（如 Knockoutjs）处理。原因是其他工具更聪明一些，并且会决定 DOM 的哪些部分需要更改。
For instance, if a user is logged in according to our present list, and our updated list, there is no reason why we should be removing their entry, only to add it again. You can use jQuery along side Knockoutjs, so the two work nicely together in an app. You should take a few minutes and read about the benefits of using Observable Arrays.
例如，如果用户是根据我们现有的列表和更新后的列表登录的，我们就没有理由删除他们的条目，而只是再次添加。您可以在 Knockoutjs 旁边使用 jQuery，因此两者在应用程序中可以很好地协同工作。您应该花几分钟时间阅读一下使用Observable Arrays的好处。
