ObservableArray не привязан к GUI

Question

Я новичок в knockout.js и пытается исправить привязку данных на сайте, который построен на Laravel, и использует knockout.js.

Наблюдаемый массив работает хорошо, и предметы могут быть нажаты и вытолкнуты без проблем. Проблема связана с привязкой к 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> 

Любая помощь или указатель на то, что может быть причиной этой проблемы был бы весьма признателен ,

UPDATE: добавлен внутренний HTML, который не был включен на сообщение перед тем

Answer 1

Вы должны иметь контроль внутри div держать ваши сообщения, как <span> или <p>. В противном случае вы просто делаете 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" />