我有一个多行字符串模板,它有自己独立的js文件,用于下划线js。但是,无论我如何逃避换行,我仍然得到:
未捕获的SyntaxError:意外的标记ILLEGAL
当文件加载到浏览器中时,在文件的第1行。
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 -->';
有什么想法吗?
答案 0 :(得分:11)
字符串中不允许使用行终止符,您需要将它们转义:
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 -->';
为了便于查看行终止符的位置,可以在文本编辑器中打开可见空格,您应该看到如下内容:
答案 1 :(得分:2)
我明白了。空行也需要转义。
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 -->';