2

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

在我的控制器中使用这样的东西：

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 模式和微风（基于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代码中进行查询......而且我不知道如何让它工作。知道如何解决吗？

欢迎任何建议！

4

1 回答 1

1

最后我忽略了微风，我只使用了剑道 TreeView js 库。一些代码如下：

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

控制器不应使用 Breeze

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


     };

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

于 2013-05-09T15:35:02.723 回答