在Knockout.js模板中保留Razor语法高亮显示

Question

我的Web应用程序是带有Razor和Knockout.js的ASP.NET MVC4.视图模型层次结构变得相当深刻和复杂,我更倾向于使用嵌套的Knockout模板用于相应的视图(每个模板的子模板都有for/each),而不是单片的HTML.

令我烦恼的是,当使用Knockout模板定义时<script type="text/html" id="scary-template">,内容的语法在Visual Studio中丢失其Razor语法高亮,因为它被解释为脚本.模板足够复杂,文本也不是纯黑色.

我考虑过的一些方法是使用Html.Raw输出开始和结束脚本标签,或HtmlHelper扩展,如Html.BeginKOTemplate(id).

我很想知道其他ASP.NET MVC人员如何处理这个问题.我是迂腐吗？无论如何,下一个需要选择此解决方案的开发人员可能会感谢我的关心.

Answer 1

我不使用Visual Studio,但我有一些可能适合您的建议.

从Knockout 2.1开始,您可以使用textarea标签定义模板,该标签将支持许多编辑器中的语法高亮(包括我使用的两个,phpDesigner和Notepad ++).为了确保textarea它实际上不显示在页面上,它必须具有display:none样式(或者在具有该样式的容器中).

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

要么

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

您还可以使用任何标记div来定义模板.但这增加了一些开销.首先,浏览器将解析(并可能修改)模板内容.其次,除非你另外指示,否则它将被Knockout解析.您可以通过将容器节点传递给applyBindings不包含模板节点的容器节点,或者通过创建绕过模板绑定的自定义绑定来实现此目的(请参阅allowBindings 此处).display:none当然,你仍然需要这种风格.

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