javascript - Kendo UI TreeView 和数据源 : from basic to SPA

Question

我正在使用 Kendo UI Treeview 和 ASP.Net MVC 将一个非常简单的示例移动到 ASP.Net MVC SPA (durandal + breeze)。使用 kendo UI + ASP.NET MVC 非常简单，因为我们只需要在我的客户端使用这样的 sintaxis:

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

在我的 Controller 中使用这样的东西:

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 从服务中获取数据，以便控件将获取所选树节点的 ID，并将调用 Operation 方法以获取所有子节点。很简单!

现在，当我想使用 mvvm 模式和 breeze(基于 https://github.com/jstott/breeze-kendo)来使用相同的控件时，该控件不起作用。它只显示一条消息“正在加载 ..” View 模型是:

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;

});

View :

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

Controller (使用 Breeze):

   [HttpGet]
    public String Metadata()
    {
        return _contextProvider.Metadata();
    }

    [HttpGet]
    public IQueryable<TreeNode> TreeObjects()
    {
        var repository = new OrganisationRepository(_contextProvider.Context);
        var username = "AnyUser";
        var treeNodes= repository.GetTreeNodes(username);
        return treeNodes.AsQueryable();
    }

如果您在前两个代码块中看到，每次伸展树(Splay Tree)中的某个树节点(使用 id 作为参数)时都会调用服务器方法。但是对于 Breeze 的情况，每次扩展节点时都应该在 js 代码中进行查询......而且我不知道如何让它工作。知道如何解决吗？

欢迎任何建议!

Answer 1

最后我忽略了 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);
}

Controller 不应使用 Breeze

public class OrganizationTreeController :Controller {}

View :

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

View 模型:

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"
             }
         );                  


     };

就是这样:现在我在 Hot Towel 模板中使用了 Kendo UI TreView :)。希望能帮到你!