Wijmo UI for the Web
KO Menu バインディング
Wijmo ユーザーガイド > 概念 > ウィジェットを統合するフレームワーク > Knockoutの使用 > 双方向のライブバインディング > KO Menu バインディング

データバインディングのオプション：

例：

この例では、メニューと組み合わせて使用する ViewModel が定義されています。このビューには、disabled、checkable、orientation、trigger、および triggerEvent プロパティがバインドされています。これらのいずれかの値が変更されると、ウィジェットは自動的にその変化に応答します。ウィジェットは、これらの値を変更する際に ViewModel の値も更新します。このメニューは、メニュー項目が縦に表示され、メニュー項目の上にマウスポインタを置くと、サブメニューがスライドして表示されます。

ViewModel の作成：

ViewModel スクリプト
コードのコピー 
var viewModel = {
  var self = this;
     self.disabled = ko.observable(false);
     self.checkable = ko.observable(false);
     self.orientation = ko.observable('horizontal');
     self.trigger = ko.observable('.wijmo-wijmenu-item');
     self.triggerEvent = ko.observable('mouseenter');
};

バインドコントロールを使用したビューの作成：

ビューのマークアップ
コードのコピー 
<ul data-bind="wijmenu: {
    disabled: disabled, 
    triggerEvent: triggerEvent, 
    mode: mode, 
    orientation: orientation}">  
  
<li><a><span class="ui-icon ui-icon-arrowthick-1-w wijmo-wijmenu-icon-left"></span>
    <span class="wijmo-wijmenu-text">Menu1</span></a></li>  
<li><a><span class="ui-icon ui-icon-arrowrefresh-1-s wijmo-wijmenu-icon-left"></span>
    <span class="wijmo-wijmenu-text">Menu2</span></a>  
    <ul> 
        <li><a>submenu1</a></li>  
        <li><a>submenu2</a>  
            <ul>  
                <li><a>submenu21</a></li>  
                <li><a>submenu22</a></li>  
                <li><a>submenu23</a></li>  
                <li><a>submenu24</a></li>  
                <li><a>submenu25</a></li>  
            </ul>  
        </li>  
        <li><a>submenu3</a></li>  
        <li><a>submenu4</a>  
            <ul>  
                <li><a>submenu41</a></li>  
                <li><a>submenu42</a></li> 
                <li><a>submenu43</a></li>  
                <li><a>submenu44</a></li> 
                <li><a>submenu45</a></li>  
                <li><a>submenu46</a></li> 
                <li><a>submenu47</a></li>  
                <li><a>submenu48</a></li>  
            </ul>  
        </li>  
        <li><a>submenu5</a></li>  
        <li><a>submenu6</a></li>  
        <li><a>submenu7</a></li>  
        <li><a>submenu8</a></li>  
    </ul>  
</li>  
<li><a><span class="ui-iconui-icon-comment wijmo-wijmenu-icon-left"></span>
    <span class="wijmo-wijmenu-text">Menu3</span></a></li>  
<li><a><span class="ui-icon ui-icon-person wijmo-wijmenu-icon-left"></span>
    <span class="wijmo-wijmenu-text">Menu4</span></a></li>  
<li><a><span class="ui-icon ui-icon-trash wijmo-wijmenu-icon-left"></span>
    <span class="wijmo-wijmenu-text">Menu5</span></a></li>  
<li><a><span class="ui-icon ui-icon-bookmark wijmo-wijmenu-icon-left"></span>
    <span class="wijmo-wijmenu-text">Menu6</span></a> 
    <ul> 
        <li><a>submenu61</a></li>  
        <li><a>submenu62</a></li> 
        <li><a>submenu63</a></li>  
        <li><a>submenu64</a></li>  
        <li><a>submenu65</a></li>  
        <li><a>submenu66</a></li> 
        <li><a>submenu67</a></li>  
        <li><a>submenu68</a></li> 
        <li><a>submenu69</a></li>  
    </ul>  
</li>  
<li><a><span class="ui-icon ui-icon-clock wijmo-wijmenu-icon-left"></span>
    <span class="wijmo-wijmenu-text">Menu7</span></a></li>  
<li><a><span class="ui-icon ui-icon-minusthick wijmo-wijmenu-icon-left"></span>
    <span class="wijmo-wijmenu-text">Menu8</span></a></li> 
</ul>

関連トピック

Menu
Knockoutの使用
双方向のライブバインディング

参照

wijmenu メソッド

 

 

Copyright © GrapeCity inc. All rights reserved.