Kendo Gantt:将任务模板挂接到MVVM

Question

我一直在追求一种方法，但是却将gantt图的任务模板连接到可观察的对象，以利用MVVM系统。我知道编辑模板可以从开箱即用，但是我一直在努力使其与任务模板一起使用。

感谢乔什·伊斯特本（Josh Eastburn）和他的小提琴，我发现kendo网格中的详细模板可以通过挂钩函数detailInit绑定到MVVM。

$("#a-kendo-grid").kendoGrid({
    detailTemplate: kendo.template( $("#detail-template").html() ),
    detailInit: function(e) {
        kendo.bind(e.detailRow, e.data); // this line produces the binding
    }
})

我乐观地尝试更改参数名称以引用任务，而不是在实例化kendo gantt时而不是详细模板，但似乎并未实现。

是否有人遇到了另一个hack/trick来将gantt图表的任务模板绑定到mvvms？

Answer 1

我一直与Telerik支持联系。他们指出，他们不打算在甘特任务与其代表性"任务模板"中的MVVM连接。

但是，我找到了一种创建MVVM绑定的骇客方法：

html

<div id="gantt"></div>
<script id="task-template" type="text/x-kendo-template">
    <div>
        <div>
            <span data-bind="text: title"></span>
        </div>
</script>

javascript

$("#gantt").kendoGantt({
  dataSource: dataSource,
  taskTemplate: $("#task-template").html(),
  dataBound: function(e) {
    var htmlElement = null;
    e.sender.dataSource.taskTree().forEach(function( taskObject ){
      htmlElement = $(".k-task[data-uid="+taskObject.uid+"]");
      if( htmlElement.find("[data-bind]").get(0).kendoBindingTarget === undefined ){
        // bind unless previously bound
        kendo.bind( htmlElement, taskObject );
      }
    });
  }
});

此片段将在Gantt图被绑定到新数据之后，将DOM中的渲染任务模板元素连接到其代表性任务对象。此事件触发EG：发布数据的第一个加载，每次用户保存对甘特任务的更改。