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裏面的熱毛巾模板:)。我希望能幫到你！