External template in Underscore

by

Here is a simple solution:

var rendered_html = render('mytemplate', {});

function render(tmpl_name, tmpl_data) {
    if ( !render.tmpl_cache ) { 
        render.tmpl_cache = {};
    }

    if ( ! render.tmpl_cache[tmpl_name] ) {
        var tmpl_dir="/static/templates";
        var tmpl_url = tmpl_dir + "https://stackoverflow.com/" + tmpl_name + '.html';

        var tmpl_string;
        $.ajax({
            url: tmpl_url,
            method: 'GET',
            dataType: 'html', //** Must add 
            async: false,
            success: function(data) {
                tmpl_string = data;
            }
        });

        render.tmpl_cache[tmpl_name] = _.template(tmpl_string);
    }

    return render.tmpl_cache[tmpl_name](tmpl_data);
}

Using “async: false” here is not a bad way because in any case you must wait until template will be loaded.

So, “render” function

  1. allows you to store each template in separate html file in static
    dir
  2. is very lightweight
  3. compiles and caches templates
  4. abstracts template loading logic. For example, in future you can use preloaded and precompiled templates.
  5. is easy to use

[I am editing the answer instead of leaving a comment because I believe this to be important.]

if templates are not showing up in native app, and you see HIERARCHY_REQUEST_ERROR: DOM Exception 3, look at answer by Dave Robinson to What exactly can cause an “HIERARCHY_REQUEST_ERR: DOM Exception 3”-Error?.

Basically, you must add

dataType: 'html'

to the $.ajax request.

More Related Contents:

  1. Underscore template throwing variable not defined error
  2. Explanation of …
  3. Loading Backbone and Underscore using RequireJS
  4. How to use if statements in underscore.js templates?
  5. correctly implement backbone comparators
  6. What is the difference between these Backbone/Underscore .bind() methods?
  7. Most efficient method to groupby on an array of objects
  8. JavaScript merging objects by id
  9. What does `void 0` mean? [duplicate]
  10. How to override Backbone.sync?
  11. Backbone.js Empty Array Attribute
  12. Removing duplicate objects with Underscore for Javascript
  13. using underscore’s “difference” method on arrays of objects
  14. Comparing two arrays of objects, and exclude the elements who match values into new array in JS
  15. How to load bootstrapped models in Backbone.js while using AMD (require.js)
  16. Backbone.js : repopulate or recreate the view?
  17. Sort an object array by custom order
  18. Backbone.js model.get() returning ‘undefined’ even though I can see the attributes in console.log
  19. How to handle initializing and rendering subviews in Backbone.js?
  20. What is context in _.each(list, iterator, [context])?
  21. The collection nested inside firebase collection’s model doesn’t have add function
  22. Accessibility and all these JavaScript frameworks
  23. Return an object key only if value is true
  24. backbone.js structuring nested views and models
  25. obj.length === +obj.length in javascript
  26. Computed properties in Backbone
  27. underscore’s each checking for {} return of callback
  28. Uncaught SyntaxError: Failed to execute ‘querySelector’ on ‘Document’
  29. Use underscore inside Angular controllers
  30. rails and backbone working together

Leave a Comment