0

我有一个简单的页面，其中包含一些这样的控件：

<div id="ActionMenu">
    <ul id="panelbar"
        data-role="panelbar"
        data-bind="events: { enable: onEnable, collapse: onCollapse }">
        <li id="item1">
            <span>Action menu</span>
            <div>
                <div class="panelActions">
                    <button data-role="button"
                            data-bind="visible: isVisible, enabled: isEnabled, events: { click: onClick }"
                            id="logOutButton">
                        Log users out
                    </button>
                </div>
            </div>
        </li>
    </ul>
</div>

然后我做这样的事情来创建一个视图模型并绑定东西：

var vm;
require(['App/Admin/userInfoGrid'], function (userInfo) {
    vm = userInfo.UserInfoGrid(config_UserInfo);
    kendo.bind($(config_UserInfo.gridId), vm);
    kendo.bind($(config_UserInfo.actionMenu), vm.ActionMenu);
    kendo.bind($(config_UserInfo.logOutButton), vm.LogOutButton);
    kendo.bind($(config_UserInfo.messageWindow), vm.MessageWindow);
});

在页面中有多个控件，所以我将它们全部绑定。

虚拟机内部：

  this.ActionMenu = kendo.observable({
            expandMode: "single",
            //onCollapse: onCollapse,
            //onEnable: function(e) {
            //    alert("on enable");
            //}
        });

这可行，但我正在使用的面板栏上有方法和事件，我想使用它们。

到目前为止，如果我想使用 viewModel 中的内置方法和事件，我必须这样做：

var panelBar = $(config.actionMenu).data("kendoPanelBar");
panelBar.enable($("#item1"), false);

如果我尝试抓取并检查 observable：

console.log(that.ActionMenu)

它没有剑道内置方法，只有我自己定义的方法。

由于我不想重新发明轮子并重新实现所有应该已经存在的方法，有没有办法让我的 ActionMenu 访问“kendoPanelBar”功能？

毕竟它们是相同的控件，我想一定有某种方法可以让它像这样工作：

that.ActionMenu.enable($("#item1"), false);

有任何想法吗？此特定示例适用于 panelBar，但同样的问题适用于所有其他控件。提前致谢

4

0 回答 0