knockout.contextmenu

    1.0.0 • Public • Published

    knockout.contextmenu Build Status

    Contextual menu, anywhere you need it

    Such example

    Install

    npm install knockout.contextmenu --save
     
    bower install knockout.contextmenu

    With npm

    Just do:

    require('knockout.contextmenu');

    Usage

    To bind a context menu to an element:

    <td data-bind="contextMenu: { 'Option 1': $root.rootMethod, 'Option 2': itemMethod, 'Option 3': anotherMethod }">

    Dont forget to include the .css file.

    You can also bind a boolean observable to the context menu, that will work as a 'check':

    { 
        "Boolean": someObservableBoolean, 
        "One method": $root.test 
    }

    You can also set dynamic 'text' and 'visible' values binding an object with the following values instead of a method:

    Option Description
    url Direct access to an URL.
    text Set menu text.
    visible Show/hide item (result must be boolean).
    action Item method, mandatory if not url defined.
    disabled Disable menu item.

    Example:

    { 
        "Complex item": { 
            "text": $root.someObservableText(), 
            "visible": someMethod() == '1', 
            "action": $root.someAction 
        }, 
        "One method": $root.test
    }

    To create a separator between two menus, just create an object with the property separator with true:

    { 
        "Some item": methodOne,
        "Separator": { 
            "separator": true, 
            "visible": someMethod() 
        },
        "Just another item": methodTwo
    }

    Bind it with left click, if you want to:

    <td data-bind="contextMenu: { 'Options': justGoHere }, bindMenuOnClick: true, bindMenuOnContextMenu: false">

    Also supports observableArrays!

    var menu = ko.observableArray([{ text: 'Item 1', action: doSomething }, { text: 'Item 2', action: doMore }]); 
    <td data-bind="contextMenu: menu">

    License

    MIT

    Install

    npm i knockout.contextmenu

    DownloadsWeekly Downloads

    27

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • avatar