Question

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

可观察数组效果很好，可以毫无问题地推送和弹出项目。问题在于绑定到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>

任何可能导致问题的帮助或指针都将受到高度赞赏。

更新：在

之前添加了未包含的内部HTML

Answer 1

您需要在div内设置一个控件来保留您的消息，例如<span>或<p>。否则，您只需执行foreach而不输出值。因此，div看起来应该是这样的，使用$data来访问值：

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

此处＆＃39;基于您的代码的工作代码段（setMessages略微修改/硬编码的值）：

＆＃13;

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());

＆＃13;

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

＆＃13;

ObservableArray不绑定到GUI

1 个答案: