I’m just starting to have a look at Ember.js and am having problems with handlebars templates that contain templated attributes:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />
<script type="text/javascript" src="js/handlebars-1.0.0.beta.6.js" />
<script type="text/javascript" src="js/ember-1.0.pre.js" />
<script type="text/x-handlebars" data-template-name="say-hello">
<p>First name: {{name.firstName}}</p>
<p>Last name: {{name.lastName}}</p>
<p>Last full: {{name.fullName}}</p>
<a href="#" {{action "edit" on="click"}}>Edit</a>
</script>
</head>
<body>
<h2>Hello World!</h2>
</body>
</html>
I get an error in Chrome:
This page contains the following errors:
error on line 14 at column 10: error parsing attribute name
Below is a rendering of the page up to the first error.
I also get an error in Firefox.
I guess this is the browser trying to validate the document, is there any way to avoid this and still keep the doctype?
It looks like handlebars templates are not valid xhtml.
The content type that tomcat was sending with my file was (application/xhtml+xml). This happens when you use the extension .xhtml on a document.
When this happens it makes no difference what your doctype in the document is, xhtml validation occurs in the document, and it fails to load.
In my case I guess I can precompile the handlebars templates to make it work in xhtml.