如何通过 Ajax 在主干视图中缓存 jQuery 模板？

Question

我正在使用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 调用后不再为空，但它是未定义的，即使设置它是回调的一部分。因此，即使#templateElement 是页面的一部分，每次呈现视图时都会发出我的 AJAX 调用。

发生了什么事？

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

Answer 1

没错。在调用 $.get() 时，您丢失了“this”，这不是您的视图。 您可以使用 underscore.bind 在您的视图上下文中调用成功回调。

但是，您实际上并不需要将模板放入 DOM。

您可以在视图原型上设置已编译的模板，该模板将用于该视图的下一个实例。例如，类似...

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
  }

Answer 2

我最好的猜测是 $.get 中的 this.template 超出了范围。

你可能想这样做

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