javascript - Mootools 列表过滤器定期向服务器发出请求

Question

我有一个 html 标记（在线用户列表）：

<div id="users">
   <div class="users_row" title="User1">User1</div>
   <div class="users_row" title="User2">User2</div>
   <div class="users_row" title="User3">User3</div>
   <div class="users_row" title="User4">User4</div>
</div>

我的mootools js函数如下（每5秒定期函数）：

      get_users: function() {                   

                new Request.JSON({
                    initialDelay: 1,
                    delay: 10000,
                    limit: 25000,
                    method: 'post',
                    url: 'handler.php', 

                        onSuccess: function(data){
                            if (data.users.length) {
                                data.users.each(function(u){
/*Wrong...*/                                    
new Element('div', {'html':u.name, 'class': 'user_row', 'title': u.name}).inject(document.id('users')); 

                                });     
                            }       
                        }
                });
        }

例如，我从 handler.php 中获取 User1、User2、User3、User5。如何重建我的在线用户列表？

 <div id="users">
       <div class="users_row" title="User1">User1</div>
       <div class="users_row" title="User2">User2</div>
       <div class="users_row" title="User3">User3</div>
       <!--<div class="users_row" title="User4">User4</div>!--> // Remove User4
       <div class="users_row" title="User5">User5</div> // Add User5
 </div>

PS：这个答案是不可接受的:)

document.id('users').set('html', '<div class="users_row" title="'+u.name+'">'+u.name+'</div>);

谢谢。

PS：来自服务器的我的 JSON 示例：

{"users":[{"name":"User1"},{"name":"User2"},{"name":"User3"},{"name":"User5"}],"total":4}

Answer 1

Try this:
Check demo here

for (i = 0; i < users.users.length; i++) {
        var el = new Element('div', {
            'class': 'users_row',
            'html': users.users[i].name
        });
        el.inject(usersDivId);
    }