如何通过Ajax缓存jQuery的模板在骨干查看？ [英] How To Cache jQuery Template In Backbone View via Ajax?

问题描述

我使用Backbone.js的和jQuery模板。我想要做的是设置视图的一个DOM元素的模板。它看起来是这样的：

 ＆LT;脚本ID =templateElement类型=文/ X-jQuery的-TMPL＆GT;
    ＆LT; D​​IV CLASS ='富'＆GT;巴≤; / DIV＆GT;
＆LT; / SCRIPT＆GT;
 

在视图初始化时，它会看到如果模板与$ .isFunction存在。如果没有它会从外部文件得到它，返回的​​DOM元素追加到body元素，然后设置this.template到DOM元素。

下一次的观点被称为，即DOM元素应该存在的，所以应该没有理由再次发出AJAX调用。然而，我发现，虽然AJAX调用后这个模板不再为空，这是不确定的，即使设置它是回调的一部分。结果我的AJAX调用发出每次视图渲染，即使是#templateElement页面的一部分时间。

这是怎么回事？

  BbView = Backbone.View.extend（{
    模板：$（'＃templateElement'）模板（）。    初始化：    //this.template是在这一点空         如果（！（$。isFunction（this.template）））{
            $获得（'模板/ file.html'，函数（模板）{
                $（'身体'）追加（模板）;
                。this.template = $（'＃templateElement'）模板（）;
            }）;
    }    //this.template在此时未定义
    ...
 

解决方案

右键。你已经失去了这个这是不是在调用$获得（），您的观点。
您可以使用underscore.bind调用成功回调在您的视图的情况下。

不过，你实际上并不需要把模板放到DOM。

您可以设置在查看原型编译模板，它会在那里对这一观点的一个实例。例如，类似...

  BbView = Backbone.View.extend（{  初始化：功能（）{
    如果（！（$。isFunction（this.template）））{
      $获得（'模板/ file.html'，_.bind（功能（模板）{
        BbView.prototype.template = $（模板）.template（）;
      }）， 这个）;
    }
    //现在你有this.template，这和所有后续实例
  }
 

I am using backbone.js and jQuery templates. What I'd like to do is set the view's template to a dom element. It looks something like this:

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

When the view is initialized, it will see if the template exists with $.isFunction. If it doesn't it will get it from an external file and append the returned dom element to the body element and then set this.template to that dom element.

The next time the view is called, that dom element should exist so there should be no reason to issue the AJAX call again. However, I'm finding that although this template is no longer null after the AJAX call, it is undefined even though setting it is part of the callback. as a result my AJAX call is issued every time the view is rendered even though #templateElement is part of the page.

What's going on?

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

解决方案

Right. You've lost 'this' which is not your view in the call to $.get(). You can use underscore.bind to call the success callback in the context of your view.

However, you don't actually need to put the template into the DOM.

You can set the compiled template on the View prototype and it will be there for the next instance of this view. For example, something like...

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
  }

这篇关于如何通过Ajax缓存jQuery的模板在骨干查看？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！