Knockout.js newby需要一些帮助

Question

我一直在摆弄KO.js，我已经下载了x7Chat，但要完成聊天以满足我的需求还有很多工作要做。有一件事是在线列表，它是在主聊天室中在线的用户列表。

管理员应该位于最前面并且在其名称标签上有不同的样式表，以便人们知道这些是管理员。现在，在数据库中，所有管理员在名为“group_id”的行中将值设置为“1”，而所有其他用户的值都设置为“0”，现在问题是我对ko.js不是很好， PHP是我更了解的东西。

这是在线列表HTML代码：

                <div id="onlinelist" data-bind="foreach: active_room().users()">
                <?php if($access_acp) { ?>
                    <div id="show_user_profile" class="onlineuser" data-bind="click: $root.show_user_profile"><a href='#' data-bind="text: group_id"></a></div>
                <?php } else { ?>
                    <div id="start_private_chat" class="onlineuser" data-bind="click: $root.start_private_chat"><a href='#' data-bind="text: user_name"></a></div>
                <?php } ?>
            </div>

我知道我需要给你们更多的代码，所以我会在下面发布一个链接来获取该文件的完整代码，感谢您的帮助！ http://pastebin.com/nwdPebHX

// FiNCH
的修改
我会试试看！我有另一个问题，我一直在努力...我希望数据库中的group_id是一个值，就像user_id在Javascript中一样。我似乎无法让它工作！我添加了这个我认为它应该是你可以看到我添加了group_id到该函数，但它不会给我数据库的值，必须有一个PHP文件提供信息，但我已经看了几个小时并且不能打算...任何想法？

this.UserRoom = function(user) {
    this.user_id = user.user_id;
    this.room_id = user.room_id;
    this.group_id = user.group_id;
    this.user_name = acceptSwedish(user.user_name);
    this.refreshed = 1;
}

Answer 1

例如，如果您想为管理员和普通用户设置不同的css，则可以使用css binding：
CSS

.admin
{
   color: red;
}

查看

<div id="start_private_chat" 
     class="onlineuser" 
     data-bind="click: $root.start_private_chat, css: {admin : group_id() == 1}">
   <a href='#' data-bind="text: user_name"></a>
</div>    

或style binding

<div id="start_private_chat" 
     class="onlineuser" 
     data-bind="click: $root.start_private_chat, style: {color : group_id() == 1 ? 'red' : 'black'}">
   <a href='#' data-bind="text: user_name"></a>
</div>   

修改
您可以使用ko.utils.arrayFilter功能划分两个组中的所有用户，例如

<div id="onlinelist" 
     data-bind="foreach: ko.utils.arrayFilter(active_room().users(), function(user)
                                              {
                                                 return user.group_id() === 1;   
                                              })">
  <!-- show admins -->
</div>
<!-- separator -->
<div id="onlinelist" 
     data-bind="foreach: ko.utils.arrayFilter(active_room().users(), function(user)
                                              {
                                                 return user.group_id() === 0;   
                                              })">
  <!-- show regular users -->
</div>