Могу ли я включить текст/шаблон script из src?

Я пытался создать базовое приложение, используя опорную основу, подчеркивание и Parse.

В моем index.html я попытался включить некоторые скрипты вроде этого:

<script data-main="js/main" src="../bower_components/requirejs/require.js"></script>
<script type="text/template" id="login-template" src="js/templates/login.js">

Когда я попытался сделать следующее на моей основной части, это не сработало.

template: _.template($('#login-template').html());
// ...
render: function() {
    this.$el.html(this.template());
}

Однако, когда я изменил свой script и добавил его непосредственно в html-документе, он работал нормально.

<script type="text/template" id="login-template">
  <header id="header"></header>
  <div class="login">
    <form class="login-form">
      <h2>Log In</h2>
      <div class="error" style="display:none"></div>
      <input type="text" id="login-username" placeholder="Username" />
      <input type="password" id="login-password" placeholder="Password" />
      <button>Log In</button>
    </form>
</script>

почему это? Есть ли способ включить шаблоны из внешнего источника в тег <script>?

(я не могу использовать $.get для этого случая, так как он не должен использовать веб-сервер прямо сейчас и продолжать получать ошибки XHR, делая это в обычном режиме.)

Ответы

Ответ 1

Почему это не работает

Атрибут <script> tag src приведет к тому, что браузер выполнит HTTP-запрос для login.js. Однако он не будет вставлять ответ в DOM. Вам понадобится, чтобы ваш код работал.

Браузеры не делают этого по той простой причине, что спецификация HTML5 не говорит, что они должны.

В частности, сценарий содержит списки действия, которые пользователь агенты должны принимать при подготовке тега <script> и выполнять его источник. Эти списки не позволяют браузеру вставлять источник script в DOM. Встроенный подход работает, потому что источник script уже находится в DOM.

Вы можете увидеть это поведение, проверив тэг <script> с атрибутом src - после загрузки, разбора и выполнения его источника он не будет содержать дочерних узлов.

Что вы могли бы сделать

Вы можете загружать шаблоны с помощью запросов AJAX, но это не рекомендуется - если вашему приложению есть небольшое количество шаблонов, проще просто включить их в свой основной HTML файл; если у него есть несколько, вам понадобится много серверных маршрутов, чтобы получить их.

Лучшим решением является, как правило, шаг сборки, который компилирует ваши шаблоны в один объект в файле JavaScript, который может быть включен как любой другой script.

С таким шагом, который компилирует ваши шаблоны в переменную под названием AppTemplates, ваш код будет выглядеть примерно так:

template: AppTemplates['templates/login.tpl']

Grunt имеет задачу grunt-contrib-jst, который делает это для шаблонов Underscore.js. Существуют эквивалентные задачи для других механизмов шаблонов.