ObservableArray not binding to GUI

Question

I'm new with knockout.js and trying to fix data binding on a site that is build on Laravel and is using knockout.js.

Observable array works well and items can be pushed and popped without issues. The problem is with the binding to GUI. When items are pushed to array those are added to GUI, but nothing else works, like removing items, and also when adding more items later on those are added on the top of the GUI element list, not added after existing items on the GUI. The observable array is having correct items after push/pop/removeall, its just not reflecting to GUI.

I guess that the problem is that observable array is not binded to GUI, but I cannot figure out what could be wrong.

Stripped code:

Chat.init = function(){
    Chat.viewModel = new Chat.ViewModel;
    ko.applyBindings(Chat.viewModel, $('#msg_canvas').get(0));
};


Chat.ViewModel = function(){

    self.messages = ko.observableArray();

    self.setMessages = function(msgs){
        _.each(msgs, function(msg){
            self.messages.push(msg);
        });
    };

    self.clearMessages = function(data, e){
        self.messages.removeAll();
    }

}

clearMessages is called via onclick: data-bind="click: $parent.clearMessages

The HTML is this:

<div id="msg_canvas"  class="msg-wrap col-md-12" 
     style="height:274px;overflow-y:scroll;" data-bind="foreach: messages">

     <div class="media msg">
           <div class="media-body">
                  <span data-bind="text: sent_at"></span>
                  <small class="col-lg-10" data-bind="text: message"></small>
           </div>
     </div>

Any help or pointer to what could be causing the problem would be highly appreciated.

UPDATE: added inner HTML which was not included to post before

Answer 1

You need to have a control inside the div to hold your messages, like a <span> or <p>. Otherwise, you're simply doing the foreach without outputting the values. So your div should look something like this, using $data to access the value:

<div id="msg_canvas" data-bind="foreach: messages">
  <p data-bind="text: $data"></p>
</div>

Here's a working snippet based on your code (setMessages slightly modified / hard coded with values):

ViewModel = function(){

    self.messages = ko.observableArray([]);

    self.setMessages = function(){
      var msgs = ['message','message','message'];
        _.each(msgs, function(msg){
            self.messages.push(msg + ' ' + self.messages().length);
        });
    };

    self.clearMessages = function(data, e){
        self.messages.removeAll();
    }
    
    self.removeMessage = function(item){
        self.messages.remove(item);
    }

};


ko.applyBindings(new ViewModel());

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div id="msg_canvas"  class="msg-wrap col-md-12" 
     style="height:274px;overflow-y:scroll;border: black solid 1px" data-bind="foreach: messages">
  <p data-bind="text: $data"></p>
  <input type="button" data-bind="click: removeMessage" value="Remove Item" />  
</div>

<input type="button" data-bind="click: setMessages" value="Add Message" />
<input type="button" data-bind="click: clearMessages" value="Remove All" />