Kierownice, Ładowanie zewnętrznych plików szablonów

Moim celem jest umieszczenie wszystkich szablonów kierownicy w jednym folderze, tak więc: 

templates/products.hbs
templates/comments.hbs

Znalazłem ten fragment w kilku miejscach za pomocą pobieżnej wyszukiwarki Google, która najwyraźniej ładuje Szablony kierownicy w zewnętrznych plikach, co ma o wiele większy sens niż umieszczenie kilku szablonów w jednym pliku indeksu.

(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);
        }               
    });         
})()

Problem w tym, że nie rozumiem tej funkcji ani jak jej używać. Dlaczego cała funkcja jest owinięta w nawiasy,a następnie wywołana? np. (function x() { ... })() I Nie wiem, co to robi.

I jeśli się nie mylę, wygląda na to, że $('#target') jest zakodowane na twardo, kiedy nie powinno być. Co więcej, Czy to nie powinno gdzieś ustawić data zmiennej, aby zmienne, do których odwołujemy się w szablonie, działały?? Wydaje się, że prawidłowa funkcja powinna być: 

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));
    }               
  });         
}

Uwaga na marginesie: gdyby ktoś mógł wskazać mi lepszy silnik szablonów, taki, który faktycznie natywnie obsługuje zewnętrzne pliki szablonów i jest lepiej zorganizowany niż Kierownica, byłbym wiecznie wdzięczna.

Kolejna kwestia: nie mogę właściwie nazwać swoich plików mytemplate.hbs, ponieważ gdy dojdzie do wywołania Ajax, widzi go jako plik binarny i przechodzi jako plik binarny. Przypuszczam, że jest to problem z ustawieniem typu MIME serwera dla .hbs do text / html lub text / plain, ale problem polega na tym, że jest to serwer gruntowy i nie jestem pewien, jak zmienić jego typy mime.

Author: CaptSaltyJack, 2014-10-30
Source

3 answers

Kod jest zawinięty w IFE (wywołana bezpośrednio funkcja ), co oznacza, że funkcja jest wykonywana natychmiast. To właśnie oznacza: 

(function x() {
  console.log('hello');
})();
Możesz również zrobić: 
(function() {
  console.log('hello');
}());

Iife są powszechnie używane do tworzenia" prywatnego " zakresu dla odrobiny kodu, aby grało ładnie (nie kolidowało) z niczym innym.


Druga funkcja, którą podałeś, ma większy sens i być może pierwsza musiała być tylko przykład.


Handlebars pozwala ci wstępnie skompilować Twoje szablony, dzięki czemu nie musisz ich kompilować w czasie wykonywania. Również w ten sposób nie musisz wykonywać dodatkowych żądań HTTP tylko po to, aby załadować szablon(y).

Na przykład, jeśli mam następującą strukturę projektu - (zauważ, że moje modele, kolekcje i widoki znajdują się w main.js tylko dla tego przykładu i wszystkie moje pliki .js są w moim katalogu głównym):

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


Moje todo.handlebars wygląda na to, że tak - po prostu html ze składnią kierownicy: 

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


Aby wstępnie skompilować mój szablon wykonałbym następujące czynności w wierszu poleceń (musisz najpierw zainstalować skrypt precompile z: npm install -g handlebars):

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

Teraz moja struktura projektu wygląda tak: 

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

Zobaczysz, że plik todo.tpl.js został dodany do mojego katalogu głównego. Mógłbym nazwać to inaczej, gdybym chciał, o ile rozszerzenie jest .js, ponieważ plik zawiera poprawny kod JavaScript. Mogłem też podać inny katalog, do którego można go wysyłać. Pamiętaj, że plik todo.tpl.js jest rzeczywistym szablonem, którego będzie używać twój widok szkieletowy. Piszesz swój HTML w todo.handlebars i kompilujesz go jako todo.tpl.js.


Teraz, gdy mam plik todo.tpl.js, mogę użyć Grunt, aby Może połączyć wszystkie moje pliki szablonów JS W plik all_templates.js lub mogę odwołać się do każdego pliku bezpośrednio w moim HTML tak: 

  <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>


Moim zdaniem, który w moim przypadku żyje wewnątrz mojej głównej.plik JS, dostałbym szablon tak: 

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;
  }
});


I jesteś skończony! Więcej informacji tutaj:

 47
Author: istos,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-06 09:05:14

Możesz odczytać szablon z zewnętrznego pliku bez potrzeby umieszczania html z tagiem script 

$.get('templates/products.hbs', function (data) {
    var template=Handlebars.compile(data);
    $(target).html(template(jsonData));
}, 'html')
 22
Author: rinkesh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-25 06:47:46

Stworzyłem prosty plugin, aby to osiągnąć. Więcej informacji na ten temat: https://github.com/miketimmerman/load-template

 1
Author: Mike Timmerman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-12 14:45:26