How to load external template synchronously with backbone

Question

I'm trying to build a mobile application with phonegap, backbone.js and coffeescript. I want to do something like this :

class MyApplication.Views.EntriesIndex extends Backbone.View
  template: load('my/template') //It will load the external file my/template.tpl

  render: ->
    $(@el).html(@template())
    this

I want to load it synchronously. I already seen require.js but I find it's too complicated for this simple think. I seen than I can use JST for a rails application but I don't find how to use it without sprocket and my application must to work on the client side only.

What is the better way to load templates synchronously?

I think the better is to preload it.

My application will be hosted on the client side.

Have you tried $.ajax with async set to false? Assuming you are using jQuery — Peeter, Oct 09 '12 at 19:32
Also is your application going to be hosted in the client or on the server (phonegap basically just wraps it)? — Peeter, Oct 09 '12 at 19:35
I must to load the template on the initalization, store it on success and cache it to load it only one time? hmmm, it can be a solution. There is no better way? It think the better solution is to precompile it. — Dougui, Oct 09 '12 at 19:37
My application will be hosted on the client side. I update my question. — Dougui, Oct 09 '12 at 19:38
If you're looking for a better way, require.js. In development it will automatically load all your templates whenever needed and in production you can compile it to a single file and load that whenever its needed. — Peeter, Oct 09 '12 at 19:38
If its all on the client side, is it really required to load those asynchronously? Its just reading them from a file anyways. — Peeter, Oct 09 '12 at 19:41
Hmmm... I don't like require.js. If there is no better way I will use it. I don't like to load my template asynchronously because I seen JST and it's realy a perfect solution for me. To look into a callback is less simpler and less readable than JST. @tkone, I don't find how to load an external template with dust.js. — Dougui, Oct 09 '12 at 19:47

score 1 · Answer 1 · answered Oct 10 '12 at 06:16

i load my templates this way:

         $.ajax({
            url     : 'my/template.tpl',
            async   : false,
            success : function(tpl) {
                //do something with the template
            }
        });

maybe it`s a solution that works also for you ..

Dougui · Accepted Answer · 2012-10-10T15:16:59.920

I did this :

class HomeView extends Backbone.View
  template: ->
    template = "views/home.html"
    cache = window.templates[template]
    return cache if cache

    cache = $.ajax(
      url: "views/home.html"
      async: false).responseText

    window.templates[template] = cache
    return cache

  render: ->
    @$el.html(@template())

And, in my application's initalization :

window.templates = {}

So I can load template asynchronously and cache it. Obviously, I will do some refactoring and, may be, place it into a JQuery function.

Thanks for yours helps.

Edit

I change my code to do this :

class Loader
  @files: {}
  @load: (path) ->
    return @files[path] ||= $.ajax(url: path, async: false).responseText

Now I can do this :

class HomeView extends Backbone.View
  template: ->
    Loader.load("views/home.html")

  render: ->
    @$el.html(@template())

This is the javascript's version :

var Loader;

Loader = (function() {

  function Loader() {}

  Loader.files = {};

  Loader.load = function(path) {
    var _base;
    return (_base = this.files)[path] || (_base[path] = $.ajax({
      url: path,
      async: false
    }).responseText);
  };

  return Loader;

})();

I will probably publish the code on github...

score 0 · Answer 3 · edited May 23 '17 at 11:43

0

If your application runs as a phonegap app, you might as well include your templates in the HTML:

Explanation of <script type = "text/template"> ... </script>

edited May 23 '17 at 11:43

Community

1
1

answered Oct 09 '12 at 20:22

user123444555621

148,182
27
114
126

I already seen this but It's not possible to do something like this : ` – Dougui Oct 09 '12 at 21:40
@Dougui Not sure how that would improve your architecture. Personally, I use a simple build tool that inlines my templates for production. Until that, I use a synchronous XHR call during development. – user123444555621 Oct 09 '12 at 21:44

How to load external template synchronously with backbone

3 Answers3

Linked

Related