admin管理员组

文章数量:1344238

Can i put my template on a separate .html files and just reference them in my index.html?

index.html :

<script type="text/template" id="item-list" src="item-list-tmpl.html"></script>

item-list-tmpl.html :

<div><%= ItemDescription  %><%= ItemCode %></div>

I tried it but the problem is it doesn't show the template on index.html but it loads on the proper spot (viewed it using firebug)

UPDATE

Found a possible solution but is not remended for production environment.

Can i put my template on a separate .html files and just reference them in my index.html?

index.html :

<script type="text/template" id="item-list" src="item-list-tmpl.html"></script>

item-list-tmpl.html :

<div><%= ItemDescription  %><%= ItemCode %></div>

I tried it but the problem is it doesn't show the template on index.html but it loads on the proper spot (viewed it using firebug)

UPDATE

Found a possible solution but is not remended for production environment.

• javascript
• backbone.js
• underscore.js

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Mar 23, 2012 at 5:52 n0minaln0minal 3,22399 gold badges4949 silver badges7272 bronze badges 2

• Looks like there is not a easy solution for this. The require.js approach in monly appearing as a solution, I never tried, but it looks for me like too much over-engineering. I hope someone es with an easy and direct solution. – fguillen Commented Mar 23, 2012 at 9:20
• If you have a solution, even to your own question, I think is better to create an independent answer, so people can ment it and vote it. And also you can choose it as the correct answer. – fguillen Commented Mar 23, 2012 at 10:58

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Got this from http://coenraets/blog/2012/01/backbone-js-lessons-learned-and-improved-sample-app/#ment-35324

Create a separate js file for this and call it before your js files for model,collection and views.

tpl = {

// Hash of preloaded templates for the app
templates:{},

// Recursively pre-load all the templates for the app.
// This implementation should be changed in a production environment. All the template files should be
// concatenated in a single file.
loadTemplates:function (names, callback) {

    var that = this;

    var loadTemplate = function (index) {
        var name = names[index];
        //console.log('Loading template: ' + name);
        $.get('templates/' + name + '.html', function (data) {
            that.templates[name] = data;
            index++;
            if (index < names.length) {
                loadTemplate(index);
            } else {
                callback();
            }
        });
    }

    loadTemplate(0);
},

// Get template by name from hash of preloaded templates
get:function (name) {
    return this.templates[name];
}

};

After that add this to your router

tpl.loadTemplates(['filename-of-your-external-html-file'], function () {
app = new AppRouter();
Backbone.history.start();
});

That should do it. But again not remended for production environment as there will be hundreds to get request and may cripple your application.

I wrote a solution for this, using jQuery and a simple TemplateCache object:

http://lostechies./derickbailey/2012/02/09/asynchronously-load-html-templates-for-backbone-views/

And I recently updated the template loading to use a jQuery plugin called TrafficCop: http://lostechies./derickbailey/2012/03/20/trafficcop-a-jquery-plugin-to-limit-ajax-requests-for-a-resource/

Hope that helps.

本文标签： javascriptexternal html template for underscorejs and backbonejsStack Overflow