如何使用剑道 UI 图在本地绑定数据？答案

【问题标题】：How to bind data locally with Kendo UI diagram?如何使用剑道 UI 图在本地绑定数据？
【发布时间】：2017-06-07 15:44:34
【问题描述】：

我们使用 Kendo UI 图来表示一个 BPMN 图（活动流）。

我们也使用 Angular。

如何将对象数组绑定到形状数据源，也就是说，对该数组的每次更改都会模仿 Kendo UI 图表中的相同更改？

更新：我找到了一个没有 Angular JS 的示例：http://dojo.telerik.com/ILUCOQ

【问题讨论】：

标签： angularjs kendo-ui bpmn

【解决方案1】：

在这里您可以定义范围并将其作为参数传递给函数，您可以动态更改范围，并在范围更改时重新调用那些使用新参数[范围]呈现 UI 的函数。

<!DOCTYPE html>
<html> 
<head>
<base href="http://demos.telerik.com/kendo-ui/diagram/angular">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.mobile.min.css" />

<script src="https://kendo.cdn.telerik.com/2017.2.504/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-content wide" ng-controller="MyCtrl">
  <div kendo-diagram k-options="options"></div>
</div>
</div>
<script>
angular.module("KendoDemos", ["kendo.directives"])
    .controller("MyCtrl", function($scope){
                    $scope.change = [3,3,2]; // You Can Dynamically Change this scope that will reflect the UI

        $scope.options = {
            dataSource: {
                data: diagramNodes($scope.c),
                schema: {
                    model: {
                        children: "items"
                    }
                }
            },
            layout: {
                type: "tree",
                subtype: "down",
                horizontalSeparation: 30,
                verticalSeparation: 20
            },
            shapeDefaults: {
                width: 40,
                height: 40
            }
        };
    })

function diagramNodes(data) {
        var root = { name: "0", items: [] };
        addNodes(root, data);
        return [root];
    }

    function addNodes(root, levels) {
        if (levels.length > 0) {
            for (var i = 0; i < levels[0]; i++) {
                var node = { name: "0", items: [] };
                root.items.push(node);

                addNodes(node, levels.slice(1));
            }
        }
    }
</script>
</body>
</html>

【讨论】：

感谢您提供代码示例，但它似乎不起作用。