Javascript 剑道UI树视图和数据源：从基础到SPA

我正在使用KendoUITreeView和ASP.NETMVC将一个非常简单的示例移动到ASP.NETMVCSPA（durandal+breeze）。使用剑道UI+ASP.NET MVC非常简单，因为在我的客户端上，我们只需使用这样的轴：

  jQuery(function () {
            jQuery("#treeview").kendoTreeView({
                    "dataSource":{
                        "transport":{
                            "prefix": "",
                            "read":{"url": "http://localhost:49729//treeview/operations"}
                        },
                        "schema":{"errors": "Errors"}},
                    "dataTextField": "Name"
                }
            );});

在我的控制器中，使用如下内容：

public JsonResult Operations(int? id)
    {
        var manager = new OperationUnitManager();

        var objects = from o in manager.GetList()
                      where (id.HasValue ? o.ParentId == id : o.ParentId == null)
                      select new
                      {
                          id = o.Id,
                          Name = o.Name,
                          hasChildren = o.HasChildren
                      };
        return Json(objects, JsonRequestBehavior.AllowGet);
    }

非常简单！TreeViewControl使用LoadOnDemand=true从服务获取数据，以便控件将获取所选treenode的id，并调用Operation方法以获取所有子节点。非常简单

现在，当我想使用mvvm模式和breeze（基于）使用相同的控件时，该控件不起作用。。它只显示一条消息“正在加载…”我在viewmodel中使用的代码是：

define(['services/logger', 'services/datacontext'], function (logger, datacontext) {
var vm = function () {
    var self = this;
    this.activate = function () {
        logger.log('Organisation View Activated', null, 'Organisation', true);
        return true;
    };

    this.viewAttached = function (view) {
        logger.log('viewAttached', this.title, 'Organisation', true);
        $('#treeView').kendoTreeView(this.treeViewOptions);
    };
    this.datacontext = datacontext;
    this.title = 'Organisation View';
    this.treeViewOptions = {
        dataTextField: 'Description',
        dataSource: new kendo.data.extensions.BreezeDataSource({
            entityManager: self.datacontext.manager,
            endPoint: "TreeObjects"
        })
    };
};
return vm;

}))

观点：

<section>
   <h2 class="page-title" data-bind="text: title"></h2>
   <div id="treeView"></div>
</section>

控制器（使用Breeze）：

[HttpGet]
公共字符串元数据（）
{
返回_contextProvider.Metadata（）；
}
[HttpGet]
公共可查询树对象（）
{
var repository=新组织存储库（_contextProvider.Context）；
var username=“AnyUser”；
var treeNodes=repository.GetTreeNodes（用户名）；
返回treeNodes.AsQueryable（）；
}

如果在前两个代码块中看到，每次展开树中的某个树节点时（使用id作为参数），都会调用server方法。但是对于breeze的情况，每次扩展节点时都应该在js代码中进行查询。。。我不知道该怎么做。你知道怎么解决吗

---

欢迎任何意见

最后我忽略了breeze，只使用了kendo TreeView js库。 下面是一些代码：

public JsonResult TreeObjects()
{
    var repository = new OrganisationRepository(MyDataContext);
    var username = "AnyUser";
    var treeNodes= repository.GetTreeNodes(username);
    return Json(treeNodes, JsonRequestBehavior.AllowGet);
}

控制器不应使用微风

public class OrganizationTreeController :Controller {}

观点：

<section>
  <h2 class="page-title" data-bind="text: title"></h2>
  <div id="treeView"></div>
</section>

---

就是这样：现在我在热毛巾模板的内部有了工作的剑道UI TreView:）。我希望能帮助你

天哪。你的回答让我尝试了一些东西。50次失败后…只是从正式名称切换到文字字符串名称，事情就开始了。i、 e.代替运输：。。。我做了“运输”：。。。

<section>
  <h2 class="page-title" data-bind="text: title"></h2>
  <div id="treeView"></div>
</section>

define(['services/logger'],
 function (logger) {
     var populate = function () {

         logger.log('Organisation Control view loaded', null, 'Organisation', true);
         $('#treeView').kendoTreeView(
             {
                 "dataSource":
                     {
                         "transport":
                             {
                                 "prefix": "",
                                 "read":
                                     {
                                         "url": "http://localhost:51123/OrganizationTree/Operations"
                                     }
                             },
                         "schema":
                             {
                                 model: {
                                     id: "id",
                                     hasChildren: "hasChildren"
                                 },
                                 "errors": "Errors"
                             }
                     },
                 "dataTextField": "Name"
             }
         );                  


     };