javascript - ObservableArray 未绑定(bind)到 GUI

Question

我是 knockout.js 的新手，正在尝试修复基于 Laravel 构建并使用 knockout.js 的网站上的数据绑定(bind)。

Observable 数组运行良好，并且可以毫无问题地推送和弹出项目。问题在于与 GUI 的绑定(bind)。当项目被推送到数组时，它们会添加到 GUI，但其他任何东西都不起作用，例如删除项目，并且当稍后添加更多项目时，这些项目会添加到 GUI 元素列表的顶部，而不是添加到 GUI 上的现有项目之后。可观察数组在推送/弹出/删除所有后具有正确的项目，它只是没有反射(reflect)到 GUI。

我猜问题是可观察数组没有绑定(bind)到 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>

任何有关可能导致问题的原因的帮助或指示将不胜感激。

更新:添加了之前未包含在发布中的内部 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" />