Knockout TreeView Web Api 绑定递归数组答案

【问题标题】：Knockout TreeView WebApi Binding Reccursive ArrayKnockout TreeView Web Api 绑定递归数组
【发布时间】：2014-12-08 20:56:13
【问题描述】：

我有这样的树：

<script src="~/Scripts/tree.js"></script>

<script type="text/html" id="tree-node">
    <li>
        <span data-bind="text: Name"></span>

        <div>
            <ul data-bind="template: {name: 'tree-node', foreach: Children}"></ul>
        </div>
    </li>
</script>

<ul data-bind="template: {name: 'tree-node', foreach: tree}"></ul>

视图模型：

var ViewModel = function () {
var self = this;
self.tree = ko.observableArray([]);

self.getTree = function() {
    $.get('/api/tree', 'json', function(data) {
        self.tree(data);
    });
}.bind(self);

};

var vm = new ViewModel();
vm.getTree();
ko.applyBindings(vm);

API：

public List<Objects> Get()
{
    ctx.Configuration.LazyLoadingEnabled = false;
    ctx.Configuration.ProxyCreationEnabled = false;
    return ctx.Objects.ToList().Where(z=>z.Parent==null).ToList();
}

对象包含必须绑定到树的子对象：

public class Objects
{
    [Key]
    [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
    public int Id { get; set; }
    [Required]
    public string Name { get; set; }
    public string Details { get; set; } 
    public virtual Objects Parent { get; set; }    
    public virtual ICollection<Objects> Children { get; set; }
}

最后我什么也得不到。我在 Knockoutjs 上下文调试器中查看视图模型，然后我看到了我的数据。但它不会在页面上呈现。为什么？

【问题讨论】：

控制台有错误吗？ /api/tree 回调中data 的值是多少？
您必须在声明 var self=this 时在 vm 中的任何地方使用 self 并使用类似 self.A=function(){//code}.bind(self) 的东西，其中内部 self 代表 root observable
数据为 [[object Object]]。控制台中没有错误。
把这个改成self，没有效果

标签： knockout.js asp.net-web-api

【解决方案1】：

tree 是一个数组，所以你应该将它定义为：

self.tree = ko.observableArray([]);

问题来自于父ul绑定：

<ul data-bind="template: {name: 'tree-node', data: tree}"></ul>

它只会使用data=tree ==> 渲染模板一次，这会将模板上下文设置为tree 数组，它没有Name 或Children 属性。这些属性属于这个数组中的元素。所以你必须将绑定更改为：

<ul data-bind="template: {name: 'tree-node', foreach: tree}"></ul>

【讨论】：

进行了更改，编辑了帖子。但又没有效果了。
在这里工作：jsfiddle。你确定你是从服务器接收数据，而且它是一个对象数组吗？
我的错，叫淘汰码太快了。检查为答案。谢谢。
@manji 我有时很有趣，为什么使用template 而不是在ul 之上使用foreach 等等，这样更容易理解。模板绑定是否让 ant 比其他的更有优势？
@supercool，这里的递归绑定示例不能用简单的foreach 绑定来完成。正如您在模板脚本中看到的那样，将绑定应用于子级时，模板本身会重新呈现。那么那些孩子在绑定的时候，如果他们也有孩子，同样的模板会再次应用，以此类推。