Ручки, загрузка файлов внешних шаблонов

Моя цель - разместить все мои шаблоны Handlebars в одной папке, так:

templates/products.hbs
templates/comments.hbs

Я нашел этот фрагмент в нескольких местах через беглый поиск Google, который, по-видимому, будет загружаться в шаблонах Handlebar во внешних файлах, что имеет гораздо больший смысл, чем класть кучу шаблонов в один файл индекса.

(function getTemplateAjax(path) {
    var source;
    var template;

    $.ajax({
        url: path, //ex. js/templates/mytemplate.handlebars
        cache: true,
        success: function(data) {
            source    = data;
            template  = Handlebars.compile(source);
            $('#target').html(template);
        }               
    });         
})()

Проблема в том, что я не понимаю эту функцию или как ее использовать. Почему вся функция заключена в круглые скобки, а затем вызывается вызов функции? например (function x() { ... })() Я не знаю, что это делает.

И если я не ошибаюсь, похоже, что $('#target') жестко запрограммирован, когда этого не должно быть. Кроме того, не предполагается ли это, что бы установить переменную data, чтобы переменные, указанные в шаблоне, работали? Кажется, правильная функция должна быть:

function getTemplateAjax(path, target, jsonData) {
  var source;
  var template;

  $.ajax({
    url: path, //ex. js/templates/mytemplate.handlebars
    cache: true,
    success: function(data) {
      source    = data;
      template  = Handlebars.compile(source);
      $(target).html(template(jsonData));
    }               
  });         
}

Боковое замечание: если кто-то может указать мне на лучший движок шаблонов, тот, который на самом деле поддерживает внешние файлы шаблонов и лучше организован, чем Handlebars, я был бы всегда благодарен.

Другая проблема: я не могу назвать имена файлов mytemplate.hbs, потому что, когда происходит вызов Ajax, он видит его как двоичный файл, и он встречается как двоичный. Я полагаю, что это проблема установки типа mime сервера для .hbs в text/html или text/plain, но проблема в том, что это сервер Grunt, и я не уверен, как изменить его типы mime.

Ответы

Ответ 1

Код завернут в IIFE (Expression Exited Function Expression), что означает, что функция выполняется немедленно. Это означает следующее:

(function x() {
  console.log('hello');
})();

Вы также можете сделать:

(function() {
  console.log('hello');
}());

IIFE обычно используются для создания области "private" для небольшого кода, так что он играет хорошо (не конфликтует) ни с чем другим.


Вторая функция, которую вы предоставили, имеет больше смысла, и, возможно, первая из них должна быть просто примером.


Handlebars позволяет прекомпилировать ваши шаблоны, поэтому вам не нужно их компилировать во время выполнения. Также вам не нужно добавлять дополнительные HTTP-запросы только для загрузки шаблона.

Например, если у меня есть следующая структура проекта - (обратите внимание, что мои модели, коллекции и представления находятся в пределах main.js только для этого примера, и все мои файлы .js находятся в моем корневой каталог):

├── Gruntfile.js
├── handlebars-v2.0.0.js
├── index.html
├── main.js
├── package.json
└── templates
    └── todo.handlebars


Мой todo.handlebars выглядит так: просто html с синтаксисом Handlebars:

<h3>{{title}}</h3>
<p>Created by: {{author}}</p>


Чтобы предварительно скомпилировать мой шаблон, я бы сделал следующее в командной строке (вам нужно установить предварительный компилятор handle script с помощью: npm install -g handlebars):

> handlebars templates/todo.handlebars -f todo.tpl.js

Теперь моя структура проекта выглядит так:

├── Gruntfile.js
├── handlebars-v2.0.0.js
├── index.html
├── main.js
├── package.json
├── templates
│   └── todo.handlebars
└── todo.tpl.js

Вы увидите, что файл todo.tpl.js был добавлен в мой корневой каталог. Я мог бы назвать это чем-то другим, если бы хотел, чтобы расширение было .js, потому что файл содержит действительный код JavaScript. Также я мог бы указать другой каталог для его вывода. Помните, что файл todo.tpl.js - это фактический шаблон, который будет использовать ваш Backbone View. Вы пишете свой HTML в todo.handlebars и скомпилируете его как todo.tpl.js.


Теперь, когда у меня есть файл todo.tpl.js, я могу использовать Grunt, чтобы, возможно, соединить все мои файлы шаблонов JS в файле all_templates.js, или я могу ссылаться на каждый файл непосредственно в моем HTML, например:

  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="http://documentcloud.github.io/underscore/underscore-min.js"></script>
  <script src="http://documentcloud.github.io/backbone/backbone-min.js"></script>
  <script src="handlebars-v2.0.0.js"></script>
  <script src="todo.tpl.js"></script> <!-- My Template for a Todo item -->
  <script src="main.js"></script>


В моем Backbone View, который в моем случае живет внутри моего файла main.js, я бы получил шаблон следующим образом:

var TodoView = Backbone.View.extend({
  tagName: 'li',  
  className: 'todo-item',
  events: {

  },

  // You can grab your template function with the name you chose when
  // you precompiled it from: `Handlebars.templates`
  template: Handlebars.templates.todo,

  initialize: function(options) {
    this.listenTo(this.model, 'change', this.render);
  },

  render: function() {
    this.$el.html(this.template( this.model.toJSON() ));
    return this;
  }
});


И вы сделали! Подробнее здесь:

Ответ 2

Вы можете прочитать шаблон из внешнего файла, не нужно помещать html с тегом script

$.get('templates/products.hbs', function (data) {
    var template=Handlebars.compile(data);
    $(target).html(template(jsonData));
}, 'html')