Javascript 如何在剑道UI工具栏中动态添加按钮？

我的剑道UI工具栏有问题。实际上，每个按钮都是在工具栏初始化期间加载的

但有些需求要求动态添加按钮

下面是如何在页面控制器中加载按钮的示例：

...
$scope.toolbarButtons = [{
    type: 'button',
    text: 'Button 1',     
    click: 'clickButton1'
}, {
    type: 'toggleButton',
    text: 'Button 2'
}, {
    type: 'button',
    text: 'Button 3'
}
...

以及如何添加工具栏并将按钮传递给指令：

<toolbar buttons="toolbarButtons"></toolbar>

return {
    scope: false,
    restrict: 'E',
    template: '<div kendo-toolbar="toolbar"></div>',
    controller: 'ToolbarController',
    link: function ($scope, element, attr) {

        $scope.buttons = $scope[attr.buttons];

        // Code to manage the toolbar
        ...
    };

---

但是，当我在toolbarButtons数组中添加按钮时，按钮不会显示。

在剑道UI

工具栏中有一个添加按钮的
add
方法。你应该做：

var toolbar = $("#toolbar").data("kendoToolBar");
toolbar.add ({ type: "button", text: "Button N", id: "buttonN" });

例如：


$（文档）.ready（函数（）{
$（“#工具栏”）.kendoToolBar({
项目：[
{
键入：“按钮”，
文本：“按钮1”
},
{
键入：“按钮”，
文本：“按钮2”
},
{
键入：“按钮”，
文本：“按钮3”
}
]
});
var n=4；
$（“#添加”）。在（“单击”，函数（）{
var toolbar=$（“#toolbar”）.data（“kendoToolBar”）；
添加（{type:“button”，text:“button”+n，id:“button”+n}）；
n++；
});
});

添加按钮
感谢您的回复，但我尝试操作按钮数组，以在X位置插入项目作为示例。这就是为什么我试图更改buttons数组的绑定。
var toolbar = $("#toolbar").data("kendoToolBar");
toolbar.add ({ type: "button", text: "Button N", id: "buttonN" });