Как кэшировать шаблон jQuery в магистральном представлении через Ajax? - PullRequest
Новая
       22

Как кэшировать шаблон jQuery в магистральном представлении через Ajax?

0 голосов
/ 18 ноября 2011

Я использую шаблоны backbone.js и jQuery. То, что я хотел бы сделать, это установить шаблон представления в элемент dom. Это выглядит примерно так: 

<script id="templateElement" type="text/x-jQuery-tmpl">
    <div class='foo'>bar</div>
</script>

Когда представление инициализируется, оно увидит, существует ли шаблон с $ .isFunction. Если этого не произойдет, он получит его из внешнего файла и добавит возвращенный элемент dom к элементу body, а затем установит this.template для этого элемента dom.

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

Что происходит? 

BbView = Backbone.View.extend({
    template: $('#templateElement').template(),

    initialize:

    //this.template is null at this point

         if(!($.isFunction(this.template))){
            $.get('template/file.html', function(templates){
                $('body').append(templates);
                this.template = $('#templateElement').template();
            });
    }

    //this.template is undefined at this point
    ...

Ответы [ 2 ]

1 голос
/ 18 ноября 2011

правый. Вы потеряли «this», которое не отображается в вызове $ .get (). Вы можете использовать underscore.bind для вызова обратного вызова в контексте вашего представления.

Однако вам не нужно помещать шаблон в DOM.

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

BbView = Backbone.View.extend({

  initialize: function() {
    if(!($.isFunction(this.template))) {
      $.get('template/file.html', _.bind(function(templates) {
        BbView.prototype.template = $(templates).template();
      }), this);
    }
    // Now you have this.template, for this and all subsequent instances
  }
1 голос
/ 18 ноября 2011

По-моему, ваш шаблон this.template внутри $ .get находится вне области видимости.

Возможно, вы захотите сделать 

initialize:
var self = this;
//this.template is null at this point

     if(!($.isFunction(self.template))){
        $.get('template/file.html', function(templates){
            $('body').append(templates);
            self.template = $('#templateElement').template();
        });
}
...