← Home |  jakobloekkemadsen.com - Usability. Design. Code.

As you may know, Knockout.js uses inline Javascript for it’s elegant, declarative bindings:

<li data-bind="css: {'active': visible()}"></li>

But if you use XSLT to render your HTML, it may fail because the curly-braces may not be supported in attributes.

To make this work, you need to do two things:

1. Convert the attribute:

   data-bind="..."

   into an

   <xsl:attribute name="data-bind">

   Like this:

   <li>
    <xsl:attribute name="data-bind">
     css: {'active': visible()}
    </xsl:attribute>
   </li>

2. Do a search and replace exchanging the curly braces with XML-safe entities:

   	"{" to "{"
   	"}" to "&#125"

   So the final XSLT should look like this:

   <li>
    <xsl:attribute name="data-bind">
     css: &#125'active': visible()&#125
    </xsl:attribute>
   </li>

    

Ugly, I know! But now it will work.