KO Menu Binding

Data-binding options:

checkable
disabled
mode
orientation
trigger
triggerEvent

Example:

In this example, the ViewModel is defined specifically for use with the menu. It has disabled, checkable, orientation, trigger, and triggerEvent properties that are bound in the View. If any of these values change, the widgets automatically respond to them. The widgets also update the ViewModel values as they modify them. In this menu, menu items appear vertically, and submenus slide out when the mouse hovers over the menu item.

Create a ViewModel:

ViewModel Script	Copy Code
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'); };

ViewModel Script

Copy Code

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');
};

Create View with Bound Controls:

View Markup	Copy Code
<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>

View Markup

Copy Code

<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>

Widgets

Concepts

Knockout

Two-Way Live Binding

Reference

wijmenu API