javascript - KnockoutJs and Templates - No code highlightingcompletion in visual studio? - Stack Overflow

admin管理员组

文章数量:1296841

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 pletion)

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.

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 pletion)

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.

• javascript
• jquery
• visual-studio-2010
• knockout.js

Share Follow edited May 17, 2013 at 15:28 4imble asked Oct 4, 2011 at 12:05 4imble4imble 14.4k1515 gold badges7676 silver badges132132 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 9

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(); %>

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./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>

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]

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() %>

本文标签： javascriptKnockoutJs and TemplatesNo code highlightingcompletion in visual studioStack Overflow