gpt4 book ai didi

javascript - ObservableArray 未绑定(bind)到 GUI

转载 作者:行者123 更新时间:2023-12-03 11:47:26 24 4
gpt4 key购买 nike

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

最佳答案

您需要在 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" />

关于javascript - ObservableArray 未绑定(bind)到 GUI,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25990585/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com