KnockoutJs and Templates - No code highlighting / completion in visual studio?
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 t开发者_StackOverflow中文版he 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.
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.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>
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() %>
精彩评论