KnockoutJs和模板 - Visual Studio中没有代码突出显示/完成？

Question

I have been playing with the tutorials on the knockout site and have enjoyed working with it.

So i decided to make a simple site with it. I was saddened to notice that i lose a lot of the support from the IDE when working with the javascript templates (highlighting, code completion)

Example template:

<script type="text/html" id="taskTemplate">
    <li>
        <input type="checkbox" data-bind="checked: isDone" />
        <input data-bind="value: title, enable: !isDone()" />
        <a href="#" data-bind="click: remove">Delete</a>
    </li>
</script>

Is this something you have to just swallow or is it avoidable / fixable? Templates seem to be one of the most used ways of building up the page and so i would prefer to have the support from the IDE.

Answer 1

To get around this I create two html helpers for the begining of my script tag and the end of my script tag. Something like:

<% Html.BeginTemplate(new { id = "features-template" }); %>
    <li>
        <input type="checkbox" data-bind="checked: isDone" />
        <input data-bind="value: title, enable: !isDone()" />
        <a href="#" data-bind="click: remove">Delete</a>
    </li>
<% Html.EndTemplate(); %>

Answer 2

Keith proposed very good and intelligent solution. However I would like to let you know KO 1.3 has native templating engine. It is avaliable trough new bindings:

• if
• ifnot
• with
• foreach!

you can read more in Steve Sanderson's announce: http://blog.stevensanderson.com/2011/08/31/knockout-1-3-0-beta-available/ (1. Control flow bindings)

So your example will have this look:

<ul data-bind="foreach: tasks">
<li>
    <input type="checkbox" data-bind="checked: isDone" />
    <input data-bind="value: title, enable: !isDone()" />
    <a href="#" data-bind="click: remove">Delete</a>
</li>
</ul>

Answer 3

It is the <script type="text/html"...> tag that is stopping Visual Studio highlight this section of your markup as html. Therefore, this question/answer seems to be the closest you are going to get to an answer.

Visual Studio - Markup syntax highlighting inside script[type:txt/html]

Answer 4

I used the accepted answer here, and since it helped me, if anyone wants actual code, here you go:

public string StartTemplate(string id)
{
    return ("<script type=\"text/html\" id=\"" + id + "\">\r\n");
}

public string EndTemplate()
{
    return ("</script>\r\n");
}

HTML:

<%= StartTemplate("WidgetTemplate")%>
 ...actual template HTML goes here...
<%= EndTemplate() %>