ObservableArray不綁定到GUI

Question

我是新來的knockout.js，並試圖修復在Laravel上構建的網站上的數據綁定，並使用knockout.js。

Observable數組運行良好，項目可以被推送和彈出沒有問題。問題在於綁定到GUI。當將項目推送到陣列時，這些項目將添加到GUI中，但除此之外沒有其他工作，例如刪除項目，以及稍後添加更多項目時，這些項目將添加到GUI元素列表的頂部，而不會添加到GUI上的現有項目之後。可觀察的數組在push/pop/removeall之後有正確的項目，它只是不反映到GUI。

我想問題是可觀察數組沒有綁定到GUI，但我無法弄清楚什麼是錯的。

剝離代碼：

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通過onclick: data-bind="click: $parent.clearMessages

的HTML被稱爲是這樣的：

<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> 

任何幫助或指針，這可能是導致該問題將高度讚賞。

更新：加入未列入張貼之前

Answer 1

你需要有div內部控制，以保持你的郵件，就像一個<span>或<p>內部HTML。否則，您只需執行foreach而不輸出值。所以，你的div應該是這個樣子，用$data訪問值：

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

這是基於你的代碼工作片斷（setMessages略作修改/很難用數值編碼）：

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" />