次のようないくつかのコントロールを含む単純なページがあります。
<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);
});
ページには複数のコントロールがあるため、すべてこの方法でバインドします。
vm の内部:
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);
そして、オブザーバブルを取得して検査しようとすると、次のようになります。
console.log(that.ActionMenu)
剣道の組み込みメソッドはなく、自分で定義したものだけです。
車輪を再発明して、既に配置されているはずのすべてのメソッドを再実装したくないので、ActionMenu を取得して「kendoPanelBar」機能にアクセスする方法はありますか?
結局のところ、それらは同じコントロールなので、代わりに次のように機能させる方法があるに違いないと思います。
that.ActionMenu.enable($("#item1"), false);
何か案は?この特定の例は panelBar に関するものですが、他のすべてのコントロールにも同じ質問が当てはまります。前もって感謝します