Я преобразовываю довольно большой шаблон php (страница с базовой логикой в нем) в шаблон underscore.js.
Проблема заключается в том, что я продолжаю иметь в ней ошибки, и эта мини-компилированная версия не дает полезной информации или номеров строк при возникновении ошибки.
Есть ли способ улучшить отладку шаблонов в underscore.js(например, номера строк)? И если нет, есть ли способ заставить шаблон остановиться в точке (таким образом, я могу сузить место ошибки).
Исправление по состоянию на апрель 2012 года: Underscore 1.3.2 (9 апреля 2012 г.) внесли изменения в _.template(), проверьте changelog и источник, так как могут возникнуть осложнения, которые были описаны здесь.
Да и нет - шаблон сначала переводится в строку кода Javascript и выполняется как один блок кода, поэтому, если вы ищете синтаксическую ошибку, вы должны удалить код нарушения из шаблон, который вы пытаетесь выполнить.
Но если это что-то еще, вложение a <% return __p.join(''); %> нарушит выполнение и вернет результат шаблона до этой точки (прочитайте источник, чтобы узнать, почему, но по существу, результаты блоков шаблонов помещаются в массив с именем __p один за другим).
Вы также можете выполнять регистрацию во время оценки вашего шаблона (т.е. поместите <% console.log(<..>) %> в свой шаблон, чтобы увидеть диагностику. Для более сложного устранения неполадок вы также можете поместить <% debugger; %> в свой код шаблона в свой любимый отладчик. код, который вы увидите, будет недружелюбным для чтения, у вас будет доступ к области оценочных шаблонов.
Если бы я выполнял обширную работу и нуждался в более широких средствах отладки, я бы, вероятно, взял копию underscore.js script и добавил код диагностики для самой функции _.template(). Например:
_.template = function(str, data) {
var c = _.templateSettings;
var tmpl = 'var __p=[],print=function(){__p.push.apply(__p,arguments);};' +
'with(obj||{}){__p.push(\'' +
str.replace(/\\/g, '\\\\')
.replace(/'/g, "\\'")
.replace(c.interpolate, function(match, code) {
return "'," + code.replace(/\\'/g, "'") + ",'";
})
.replace(c.evaluate || null, function(match, code) {
return "');" + code.replace(/\\'/g, "'")
.replace(/[\r\n\t]/g, ' ') + "__p.push('";
})
.replace(/\r/g, '\\r')
.replace(/\n/g, '\\n')
.replace(/\t/g, '\\t')
+ "');}return __p.join('');";
console.log(tmpl.replace(/;/g, '\n')); // <- dump compiled code to console before evaluating
var func = new Function('obj', tmpl);
return data ? func(data) : func;
};
В Backbone Eye (расширение Firebug) вы можете отлаживать шаблоны подчеркивания - так же, как если бы они были обычными файлами JavaScript. Идентификатор шаблона (если указан) появляется в окне script (из Firefox), и вы можете выбрать его (как обычный файл script), поставить контрольные точки и посмотреть, как шаблон инкрементно строится. Более подробная информация о том, как это сделать, находится в http://dhruvaray.github.io/spa-eye/#views. Это должно помочь вам сузить источник ошибки.
[Отказ от ответственности: я являюсь автором Backbone Eye]
Если у вас есть синтаксическая ошибка javascript внутри длинного шаблона, иногда ее трудно найти, поскольку linter не будет понимать javascript внутри < %% >
Используйте функцию замены редактора и замените:
Поиск:
%>[\s\S]*?<%[=-]?
Заменить:
\n//html\n
Он удалит любой HTML-код между вашим javascript, затем вы можете использовать linter или http://esprima.org/demo/validate.html для поиска синтаксических ошибок.
После замены всех и украшенных:
Примечание. Это регулярное выражение оставит HTML в начале и конце вашего файла, поэтому просто удалите их вручную.
Просто используйте консоль инструментов разработки Internet Explorer (F12). Он может отладить ваш шаблон подчеркивания. Я использовал chrome и firefox, и больше всего я получил строку в jquery.js или underscore.js о том, что произошла ошибка. Но отладчик Internet Explorer обратился непосредственно к нарушающему коду внутри шаблона подчеркивания. Это позволит вам выяснить ошибку.