Search code examples
ractivejs

Is it possible to set multiple decorators for a single node?


Something like

<button decorator='initbutton:p1, p2; tooltip:Text' />

I have found a decorator helper plugin for combining decorators:
http://martypdx.github.io/ractive-decorators-helpers/
Is it the best option right now?


Solution

  • Use ractive-multi-decorator.

    First install it:

    npm install ractive-multi-decorator --save
    

    Then add it to ractive:

    var ractive = new Ractive({
        ...
        decorators: {
            multi: require('ractive-multi-decorator')
        },
        ...
    });
    

    Then use it:

    <div 
        id="myelement"
        decorator="multi:{ 
            localdecorator: [ {{ dynamicArg1 }}, arg2, arg3 ], 
            globaldecorator: {{singleArg}}, 
            anotherdecorator: true 
        }"
    ></div>
    

    Credits go to akhouzy and martypdx.