Knockout.js infinite loop
According to the selected items in multiple select list. I want to make only selected items visible in a foreach loop. But the code goes into an infinite loop 

<div class="chat-box round2" data-bind="foreach: chatUsers, visible: $root.shouldDisplayItem($data)">
                <div id="messages">
                    <ul id="message-list" data-bind="foreach: messages">
                        <li><span data-bind="text: text"></span></li>
                    </ul>
                </div>
                <div id="chatform">
                    <table width="100%">
                        <tr>
                            <td>
                                <input type="text" data-bind='value: $root.messageToAdd, valueUpdate: "afterkeydown"' />
                            </td>
                            <td align="right" width="100px">
                                <button type="submit" data-bind='enable: $root.messageToAdd().length > 0, click: $root.addMessage'>
                                    Gönder</button>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>



    <script type="text/javascript">
           
            var initialData = [
        {
            id: "Danny",
            name: "LaRusso",
            messages: [
            {
                text: "kara kaşlı yar"
            }]
        }];
           
            var chatUserViewModel = function (chatUsers) {

                var self = this;
                self.selectedChatUsers = ko.observableArray();

                self.chatUsers = ko.observableArray(ko.utils.arrayMap(chatUsers, function (chatUser) {
                    return { id: chatUser.id, name: chatUser.name, messages: ko.observableArray(chatUser.messages) };
                }));

                this.shouldDisplayItem = function (chatUser) {
                                       return (self.selectedChatUsers().indexOf(chatUser) < 0);                   
                };               
            };
          
            ko.applyBindings(new chatUserViewModel(initialData));
            
        });
 </script>
Knockout.js infinite loop
===

According to the selected items in multiple select list. I want to make only selected items visible in a foreach loop. But the code goes into an infinite loop 

<div class="chat-box round2" data-bind="foreach: chatUsers, visible: $root.shouldDisplayItem($data)">
                <div id="messages">
                    <ul id="message-list" data-bind="foreach: messages">
                        <li><span data-bind="text: text"></span></li>
                    </ul>
                </div>
                <div id="chatform">
                    <table width="100%">
                        <tr>
                            <td>
                                <input type="text" data-bind='value: $root.messageToAdd, valueUpdate: "afterkeydown"' />
                            </td>
                            <td align="right" width="100px">
                                <button type="submit" data-bind='enable: $root.messageToAdd().length > 0, click: $root.addMessage'>
                                    Gönder</button>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>



    <script type="text/javascript">
           
            var initialData = [
        {
            id: "Danny",
            name: "LaRusso",
            messages: [
            {
                text: "kara kaşlı yar"
            }]
        }];
           
            var chatUserViewModel = function (chatUsers) {

                var self = this;
                self.selectedChatUsers = ko.observableArray();

                self.chatUsers = ko.observableArray(ko.utils.arrayMap(chatUsers, function (chatUser) {
                    return { id: chatUser.id, name: chatUser.name, messages: ko.observableArray(chatUser.messages) };
                }));

                this.shouldDisplayItem = function (chatUser) {
                                       return (self.selectedChatUsers().indexOf(chatUser) < 0);                   
                };               
            };
          
            ko.applyBindings(new chatUserViewModel(initialData));
            
        });
 </script>