gistfile1.mustache

cujo.js equivalent (in-browser):

file: myApp.view.LoginPanel.html

<div class="myapp-view-loginpanel">
    <span data-attach="greeting">${display.greeting}</span>
    <a data-attach="action" href="{$config.loginUrl}">{$display.loginAction}</a>
</div>

logout version extends login version (inheritance defined in myApp.view.LogoutPanel.js:

file: myApp.view.LogoutPanel.html

<div data-cujo="{inherit:true}" class="myapp-view-logoutpanel" data-override="mixin">
    <a data-attach="action" href="{$config.logoutUrl}" data-override="mixin">{$display.logoutAction}</a>
</div>

When LogoutPanel overrides LoginPanel, the final output looks like this (sample data and i18n strings included for completeness):

<div data-cujo="{inherit:true}" class="myapp-view-loginpanel myapp-view-logoutpanel" data-override="mixin">
    <span data-attach="greeting">Hello, Tommy!</span>
    <a data-attach="action" href="/logout/" data-override="mixin">logout</a>
</div>

Notice that the class attributes were combined to allow OOCSS "inheritance".