我刚刚开始使用knockoutjs,我正在尝试构建一个动态 TreeView 。为了简化,我删除了与问题无关的所有内容。 TreeView 将由嵌套的 UL 标签组成。
HTML:
<div id="pnlDestinations">
<ul data-bind="template: { name: 'GroupTemplate', foreach: Groups }"></ul>
</div>
<script type="text/html" id="GroupTemplate">
<li>
<a href="#" data-bind="text: GroupName, click: function() { RetrieveDestinations($data); }"></a>
<ul data-bind="template: { name: 'DestinationTemplate', foreach: Destinations }"></ul>
</li>
</script>
<script type="text/html" id="DestinationTemplate">
<li>
<a href="#" data-bind="text: DestinationName"></a>
</li>
</script>
代码:
function ViewModel(groups) {
Groups = ko.mapping.fromJS(groups);
RetrieveDestinations = function (group) {
$.getJSON('GetDestinations?id=' + group.GroupId(), function (data) {
group.Destinations(ko.mapping.fromJS(data));
});
}
}
$(function () {
$.getJSON("GetGroups", function (data) {
ko.applyBindings(new ViewModel(data));
});
});
因此,我将 TreeView 绑定(bind)在两个级别(使用 2 个模板),但我只检索“GetGroups”中的一级(目的地存在,但是一个空数组)。
单击组时,将在 RetrieveDestinations() 方法中检索目标,并且应替换组中的空数组。但是,它们没有出现在我的 TreeView 中。
TreeView 的绑定(bind)应该是正确的,因为如果我将目的地包含在“GetGroups”中,则所有内容都会正确呈现。
最佳答案
ko.mapping.fromJS
当给定一个数组时,会将其转换为 observableArray。
因此,当您执行 group.Destinations(ko.mapping.fromJS(data))
时,您将 Destinations
observableArray 的值设置为等于 observableArray。基本上,这仅意味着它被包裹两次。
你可以做类似group.Destinations(ko.mapping.fromJS(data)())
jsFiddle 目前不允许保存,但这里是您的代码简化为使用映射插件来更新目的地(setTimeouts 来模拟 AJAX):
<div id="pnlDestinations">
<ul data-bind="foreach: Groups">
<li>
<a href="#" data-bind="text: GroupName, click: $root.RetrieveDestinations"></a>
<ul data-bind="foreach: Destinations">
<li>
<a href="#" data-bind="text: DestinationName"></a>
</li>
</ul>
</li>
</ul>
</div>
View 模型:
function ViewModel(groups) {
this.Groups = ko.mapping.fromJS(groups);
this.RetrieveDestinations = function (group) {
setTimeout(function() {
//fake data
var name = group.GroupName(),
data = [
{ DestinationName: name + "-1" },
{ DestinationName: name + "-2" },
{ DestinationName: name + "-3" }
];
ko.mapping.fromJS(data, {}, group.Destinations);
group.Destinations.push({ DestinationName: "new" });
}, 100);
};
}
$(function () {
setTimeout(function() {
var data = [
{ GroupName: "Group1", Destinations: [] },
{ GroupName: "Group2", Destinations: [] },
{ GroupName: "Group3", Destinations: [] }
];
ko.applyBindings(new ViewModel(data));
}, 100);
});
关于jquery - Knockoutjs TreeView 延迟加载: child nodes not showing,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9162469/