Question

I am trying to add an ember view using handlebars.js in jade. When I use this code

script(type='text/x-handlebars') 
    {{view App.LoginView}} 
        {{view Ember.TextField valueBinding="username" placeholder="Enter your username"}}

it renders it as:

<div id="ember194" class="ember-view"></div>
<input id="ember204" class="ember-view ember-text-field" placeholder="Enter your username" type="text">

I can’t seem to get the textfield to be wrapped within the view. I am wondering if there is a trick to be able to use handlebars correctly within a jade template.

The desired result that I want is:

<div id="ember194" class="ember-view">
    <input id="ember204" class="ember-view ember-text-field" placeholder="Enter your username" type="text">
</div>

Answer 1

Try:

script(type='text/x-handlebars') 
    {{#view App.LoginView}} 
        {{view Ember.TextField valueBinding="username" placeholder="Enter your username"}}
    {{/view}}

Jade saves you from HTML closing tags but the handlebars block must be intact, and what you’re asking for requires the Ember.TextField to be inside a {{#view}} block.

[Edit] FYI check out http://emblemjs.com/