Question

My web application is ASP.NET MVC4 with Razor and Knockout.js. The view model hierarchy is becoming rather deep and complicated and I am moving more towards using nested Knockout templates for the corresponding views (each with a for/each for its child templates, etc) rather than monolithic slabs of HTML.

Something that annoys me is that when using the Knockout template definition syntax of <script type="text/html" id="scary-template"> the contents loses its Razor syntax highlighting in Visual Studio because it is interpreted as script. The templates are complex enough without the text all being plain black as well.

Some approaches I have considered are using Html.Raw to output the opening and closing script tags, or HtmlHelper extensions like Html.BeginKOTemplate(id) .

I’m interested to hear how other ASP.NET MVC folks approach this. Am I being pedantic? In any case the next developer who needs to pick this solution up will probably thank me for caring.

Answer 1

I don’t use Visual Studio, but I have some suggestions that could work for you.

Starting with Knockout 2.1, you can define a template using the textarea tag, which will support syntax highlighting in many editors (including two I use, phpDesigner and Notepad++). To make sure the textarea doesn’t actually display on the page, it must have the display:none style (or be in a container with that style).

<textarea id="mytemplate" style="display:none">
    <div>template content</div>
</textarea>

or

<div style="display:none">
    <textarea id="mytemplate">
        <div>template content</div>
    </textarea>
</div>

You can also use any tag such as div to define a template. But this adds some overhead. First, the template content will be parsed (and possibly modified) by the browser. Second, it will be parsed by Knockout unless you instruct it otherwise. You can do this by passing a container node to applyBindings that doesn’t contain the template nodes, or by creating a custom binding that bypasses bindings for the template (see allowBindings here). You will still need the display:none style, of course.

<div style="display:none" data-bind="allowBindings:false">
    <div id="mytemplate">
        <div>template content</div>
    </div>
</div>