Javascript Multi-line string and Unexpected Token ILLEGAL

javascript, multiline, string, templates, underscore.js

Solution

Line terminators are not allowed in strings, you need to escape them:

App.Templates['template1'] = '\
\
<div data-role="page" data-theme="c" id="" data-title="">\
\
    <div data-role="content" class="subnav">\
\
        <table id="day-table" cellpadding="0" cellspacing="0" border="0">\
            <thead class="ui-body-a">\
                <tr>\
                    <th>T</th>\
                    <th>J</th>\
                    <th>H</th>\
                    <th>C</th>\
                </tr>\
            </thead>\
            <tbody>\
            </tbody>\
            <tfoot>\
                <tr>\
                    <td class="total-label" colspan="2">Total:</td>\
                    <td class="total"></td>\
                </tr>\
                <tr>\
                    <td class="btn-row">\
                        <a href="#r" data-role="button" id="add-btn" data-rel="dialog" data-mini="true" data-inline="true" data-icon="add">Add Rows</a>\
                        <a href="#" data-role="button" id="save-btn" data-rel="dialog" data-mini="true" data-inline="true" data-theme="b" data-icon="check">Save</a>\
                    </td>\
                </tr>\
            </tfoot>\
        </table>\
\
    </div><!--/content-->\
\
</div><!-- /page -->';

To make it easier to see where you have line terminators, you can turn on visible whitespace in your text editor and you should see something like this:

Problem

I have a multi-line string template in it's own separate js file for use in underscore js. However, no matter how I escape the line breaks I still get an: Uncaught SyntaxError: Unexpected token ILLEGAL On line 1 of the file when it's loaded into the browser. ``` App.Templates['template1'] = '\ <div data-role="page" data-theme="c" id="" data-title="">\ <div data-role="content" class="subnav">\ <table id="day-table" cellpadding="0" cellspacing="0" border="0">\ <thead class="ui-body-a">\ <tr>\ <th>T</th>\ <th>J</th>\ <th>H</th>\ <th>C</th>\ </tr>\ </thead>\ <tbody>\ </tbody>\ <tfoot>\ <tr>\ <td class="total-label" colspan="2">Total:</td>\ <td class="total"></td>\ </tr>\ <tr>\ <td class="btn-row">\ <a href="#r" data-role="button" id="add-btn" data-rel="dialog" data-mini="true" data-inline="true" data-icon="add">Add Rows</a>\ <a href="#" data-role="button" id="save-btn" data-rel="dialog" data-mini="true" data-inline="true" data-theme="b" data-icon="check">Save</a>\ </td>\ </tr>\ </tfoot>\ </table>\ </div><!--/content-->\ </div><!-- /page -->'; ``` Any ideas?

Original source