Kendo UI TreeView和数据源：从基本到SPA

Question

我正在使用Kendo UI Treeview和ASP.Net MVC移动一个非常简单的示例到ASP.Net MVC SPA（durandal + breeze）。使用剑道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" 
       } 
      );}); 

而且在我的控制器使用这样的事情：

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模式和微风使用相同的控件（基于https://github.com/jstott/breeze-kendo）控件不起作用..它只是显示一条消息“加载..”代码我用我的视图模型是：

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> 

的控制器（使用微风）：

[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(); 
    } 

如果您在代码的前两个块看到服务器方法被调用每当一些树节点在树被展开（使用id作为参数）。但是对于微风的情况下，每次扩展节点时都应该在js代码中进行查询......并且我不知道该如何工作。任何想法如何解决它？

欢迎任何建议！

Answer 1

最后我忽略了微风，我只用了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> 

视图模型：

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


    }; 

就是这样：现在我有工作国王Kendo UI TreView里面的热毛巾模板:)。我希望能帮到你！