Kendo甘特图：将任务模板挂接到 MVVM

Question

我一直在寻找一种方法，无论多么老套，将甘特图的任务模板连接到 ObservableObject 以利用 MVVM 系统。我知道编辑模板支持开箱即用，但是我一直在努力让它与 任务模板 一起工作。

感谢 Josh Eastburn 和 his fiddle，我发现 Kendo 网格中的 详细信息模板 可以通过挂钩函数绑定到 MVVM detailInit。

$("#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 甘特图时，我乐观地尝试更改参数名称以引用任务而不是详细信息模板，但它似乎没有实现。

有没有人遇到另一个 hack/trick 将甘特图的 任务模板 绑定到 MVVM？

Answer 1

我一直在联系 Telerik 支持人员。他们声明他们没有计划在甘特图任务与其代表时间线界面中的任务模板之间实现 MVVM 连接。

但是，我发现了一种创建 MVVM 绑定的 hacky 方法：

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

在甘特图绑定到新数据后，此代码段会将 DOM 中呈现的任务模板元素与其代表任务对象挂钩。此事件触发例如：post 第一次加载数据，以及每次用户保存对甘特图任务的更改时。

Kendo甘特图：将任务模板挂接到 MVVM

Kendo Gantt: Hooking the task template to MVVM

javascript

telerik

kendo-ui

kendo-gantt