Render Backbone Template Variable In Quotes

Hi I'm using Backbone to render a Jade template into HTML. The view looks like this:

script(type="text/template",id="waiting_call_template") 
    div(class="call-code") <%= channelId %>
    div(style="display: inline-block; vertical-align: top; margin-right: 20px; width: 130px;")
      div(class="statistic", title='<%= fullPage %>') <%= page %>

When that renders, the HTML output looks like this:

<div title="&lt;%= fullPage%&gt;" class="statistic">test.html</div>

This is happening because the fullPage variable is in quotes. How do I get Backbone to recognize that fullPage is a variable even though it's in quotes?

It works if you change the markers to {{- varName }} by using this script:

_.templateSettings.escape = /\{\{-(.*?)\}\}/g

In your situation you will have to change the template into:

script(type="text/template",id="waiting_call_template") 
    div(class="call-code") {{- channelId }}
    div(style="display: inline-block; vertical-align: top; margin-right: 20px; width: 130px;")
      div(class="statistic", title='{{- fullPage }}') {{- page }}

source: Underscore templating - changing token markers

Try this instead:

div(class="statistic", title=<%= fullPage %>)

When you want to print something between the quotes, use "#{}" syntax:

div(class="statistic", title="#{fullPage}") #{page}

Did you try the escape() function from underscore?

From the Underscore manual:

_.escape(string) Escapes a string for insertion into HTML, replacing &, <, >, ", ', and / characters.

Just un-escape your template. Using underscore 'unescape'. In your backbone:

_.template( $('#tmpl-following').html() ),

change to

_.template( _.unescape( $('#tmpl-following').html() ) ),