अंडरस्कोर में बाहरी टेम्पलेट

Question

मैं अंडरस्कोर टेम्पलेट का उपयोग करता हूं । टेम्पलेट के रूप में बाहरी फ़ाइल संलग्न करना संभव है ?

बैकबोन व्यू में मेरे पास है:

 textTemplate: _.template( $('#practice-text-template').html() ),

 initialize: function(){                                            
  this.words = new WordList;            
  this.index = 0;
  this.render();
 },

मेरे HTML में है:

<script id="practice-text-template" type="text/template">
   <h3>something code</h3>
</script>

यह अच्छा काम करता है। लेकिन मुझे बाहरी खाका चाहिए । मैं कोशिश करूँगा:

<script id="practice-text-template" type="text/template" src="templates/tmp.js">

या

textTemplate: _.template( $('#practice-text-template').load('templates/tmp.js') ),

या

$('#practice-text-template').load('templates/tmp.js', function(data){ this.textTemplate = _.template( data ) })

लेकिन यह काम नहीं करता।

Answer 1

EDIT: यह उत्तर पुराना और पुराना है। मैं इसे हटा दूंगा, लेकिन यह "स्वीकृत" उत्तर है। मैं इसके बजाय अपनी राय का इंजेक्शन दूंगा।

मैं ऐसा करने की वकालत नहीं करूंगा। इसके बजाय, मैं सभी टेम्पलेट्स को अलग-अलग HTML फ़ाइलों में अलग करूंगा। कुछ इन एसिंक्रोनस को लोड करने का सुझाव देंगे (आवश्यकताएं ।js या एक प्रकार का टेम्पलेट कैश)। यह छोटी परियोजनाओं पर अच्छी तरह से काम करता है, लेकिन बहुत सारे टेम्पलेट्स के साथ बड़ी परियोजनाओं पर, आप अपने आप को पेज लोड पर छोटे async अनुरोधों का एक टन बनाते हैं जो मुझे वास्तव में नापसंद है। (यूजी ... ठीक है, आप आर.जे के साथ अपनी प्रारंभिक निर्भरता को पूर्व-संकलित करके आवश्यकता के अनुसार इसे प्राप्त कर सकते हैं। लेकिन टेम्पलेट्स के लिए, यह अभी भी मेरे लिए गलत लगता है)

मुझे सभी HTML टेम्पलेट को एक ही टेम्प्लेट.जेएस फ़ाइल में संकलित करने के लिए एक ग्रंट टास्क (ग्रंट-कंट्रीब-जेस्ट) का उपयोग करना पसंद है और इसमें शामिल हैं। आपको सभी दुनिया के सर्वश्रेष्ठ IMO मिलते हैं ... टेम्प्लेट एक फ़ाइल में रहते हैं, उक्त टेम्प्लेट्स का संकलन बिल्ड टाइम (रनटाइम नहीं) पर होता है, और पेज शुरू होने पर आपके पास एक सौ छोटे एसिंक्स अनुरोध नहीं होते हैं।

नीचे सब कुछ कबाड़ है

मेरे लिए, मैं अपने टेम्पलेट के साथ एक जेएस फाइल शामिल करने की सादगी पसंद करता हूं। इसलिए, मैं view_template.js नामक एक फ़ाइल बना सकता हूं जिसमें एक चर के रूप में टेम्पलेट शामिल है:

app.templates.view = " \
    <h3>something code</h3> \
";

फिर, यह सामान्य फ़ाइल की तरह स्क्रिप्ट फ़ाइल सहित सरल है और फिर आपके विचार में इसका उपयोग कर रहा है:

template: _.template(app.templates.view)

इसे एक कदम आगे बढ़ाते हुए, मैं वास्तव में कॉफ़ीस्क्रिप्ट का उपयोग करता हूं, इसलिए मेरा कोड वास्तव में इस तरह दिखता है और अंत से बचने वाले वर्णों से बचते हैं:

app.templates.view = '''
    <h3>something code</h3>
'''

इस दृष्टिकोण का उपयोग करना आवश्यकता में ब्रिंजिंग से बचा जाता है। जहाँ यह वास्तव में आवश्यक नहीं है।

Comments

यह दृष्टिकोण जो भी वाक्यविन्यास हाइलाइटिंग, सुधार और रीफ़ैक्टरिंग फ़ंक्शन है वह विचारधारा के साथ उपलब्ध होगा। हालांकि मतदान नहीं।

— किंजल दीक्षित

मुझे क्षमा करें, लेकिन मुझे इस उत्तर को अस्वीकार करना पड़ा। यह बहुत ही भद्दा है क्योंकि यह अभी भी टेम्प्लेट फ़ाइलों को स्क्रिप्ट फ़ाइलों के रूप में रखेगा, सिर्फ थोड़े को टेम्प्लेट की तरह देखने के लिए मजबूर किया जाता है। टेम्प्लेट्स को टेम्प्लेट करने की आवश्यकता होती है, इसलिए यदि आपको आवश्यकताएँ में लाना है या नीचे दिए गए कर्चिक के शानदार समाधान का उपयोग करना है, तो मुझे लगता है कि यह निश्चित रूप से इसके लायक है।

— टॉमी फोर्सस्ट्रॉम

@ TommiForsström मैं सहमत हूं। मैं इस दृष्टिकोण से दूर चला गया हूं। वाह! 4 दिसंबर, 2011 को

— बैकबोन.जैस

वास्तव में, मैं इस उत्तर को हटाना चाहता हूं, लेकिन मैं ऐसा नहीं कर सकता क्योंकि यह स्वीकृत उत्तर है। यह पुराना है और इससे बेहतर समाधान और भी हैं। आज, मैं उन्हें अलग टेम्पलेट फ़ाइलों के रूप में होगा और उन्हें अलग-अलग टेम्पलेट में बनाने के लिए एक अलग कार्य (JST, उदाहरण के लिए) का उपयोग करूँगा। उन सभी को अलग-अलग लाने की async प्रकृति से बचने के लिए फ़ाइल। यह दोनों दुनिया के दृष्टिकोण IMO का सबसे अच्छा है।

— बजे ब्रायन जेनिसियो

अच्छी तरह से अगर वहाँ बहुत सारे टेम्पलेट नहीं हैं मुझे लगता है कि पूर्व समाधान वास्तव में सबसे कुशल है।

— सिल्कअमिन

Answer 2

यहाँ एक सरल उपाय है:

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 + '/' + 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);
}

यहां "async: false" का उपयोग करना एक बुरा तरीका नहीं है क्योंकि किसी भी मामले में आपको इंतजार करना होगा जब तक कि टेम्पलेट लोड नहीं किया जाएगा।

तो, "रेंडर" फ़ंक्शन

1. आपको स्थिर टेम्पलेट में प्रत्येक टेम्पलेट को अलग HTML फ़ाइल में संग्रहीत करने की अनुमति देता है
2. बहुत हल्का है
3. संकलन और कैश टेम्पलेट
4. अमूर्त टेम्पलेट लोडिंग तर्क। उदाहरण के लिए, भविष्य में आप पहले से लोड किए गए और पहले से तैयार किए गए टेम्पलेट्स का उपयोग कर सकते हैं।
5. उपयोग में आसान है

[मैं एक टिप्पणी छोड़ने के बजाय उत्तर को संपादित कर रहा हूं क्योंकि मेरा मानना ​​है कि यह महत्वपूर्ण है।]

यदि टेम्प्लेट मूल एप्लिकेशन में दिखाई नहीं दे रहे हैं , और आप देखते हैं HIERARCHY_REQUEST_ERROR: DOM Exception 3, तो डेव रॉबिन्सन के उत्तर पर गौर करें कि वास्तव में "HIERARCHY_REQUEST_ERR: DOM एक्सेप्शन 3" -Error क्या हो सकता है? ।

मूल रूप से, आपको जोड़ना होगा

dataType: 'html'

$ .ajax अनुरोध के लिए।

Comments

@ BinaryNights - क्या हमें हमेशा dataType: 'html'अपने ajax अनुरोध में जोड़ना चाहिए , बस मामले में?

— मैट

क्या यह काम भी नेस्टेड विचारों के लिए है? यदि कोई दृश्य किसी अन्य दृश्य को संदर्भित करता है, तो स्पष्ट रूप से मेरे पास यह कार्य नहीं हो सकता है।

— टी। रॉसी

हां, इसे नेस्टेड टेम्प्लेट के लिए भी काम करना चाहिए। बस रेंडर हेल्पर जोड़ें और इसे कॉल करें जैसे: <% = रेंडर ('नेस्टेड_टमप्लेट', डेटा)%>

— koorchik

नमस्कार, क्या आप "संकलन और कैश टेम्पलेट" के बारे में थोड़ा और बता सकते हैं? जब मैंने रेंडर फ़ंक्शन को कॉल करने का प्रयास किया, तो उसने tmpl_data को मूल्य वापस करने के लिए नहीं जोड़ा है, यह सिर्फ इसे पारित कर दिया है जैसे यह है। मुझे उसके बाद "Handlebars.compile" विधि को कॉल करना पड़ा। धन्यवाद।

— cdagli

Answer 3

यह मिश्रण आपको बहुत सरल तरीके से अंडरस्कोर का उपयोग करके बाहरी टेम्पलेट प्रदान करने की अनुमति देता है _.templateFromUrl(url, [data], [settings]):। विधि API लगभग अंडरस्कोर के _.template () के समान है । कैचिंग शामिल है।

_.mixin({templateFromUrl: function (url, data, settings) {
    var templateHtml = "";
    this.cache = this.cache || {};

    if (this.cache[url]) {
        templateHtml = this.cache[url];
    } else {
        $.ajax({
            url: url,
            method: "GET",
            async: false,
            success: function(data) {
                templateHtml = data;
            }
        });

        this.cache[url] = templateHtml;
    }

    return _.template(templateHtml, data, settings);
}});

उपयोग:

var someHtml = _.templateFromUrl("http://example.com/template.html", {"var": "value"});

Comments

वास्तव में अच्छा सा मिश्रण बहुत साफ है! :) साझा करने के लिए चीयर्स

— निक व्हाइट

बहुत शांत डी, यह उस तरह का समाधान था जिसकी मुझे तलाश थी। और मुझे लगता है कि इसका उपयोग खाका निजी रखने के लिए किया जा सकता है।

— बड़ामाडॉल्फ

@ भाभी यह उत्तर में प्रदान की जाती है। इसके अलावा, आपको टेम्प्लेट लोड करने के लिए jQuery की आवश्यकता है, लेकिन आप किसी अन्य लाइब्रेरी का उपयोग करके कोड के उस हिस्से को फिर से लिख सकते हैं जो AJAX के माध्यम से टेम्प्लेट को आपके स्वाद में लोड करता है।

— दिमित्री

@Dmitriy async: असत्य को हटा दिया जाता है, इसलिए यदि मैं async पैरामीटर के साथ कॉल करता हूं, तो यह काम नहीं कर रहा है, मुझे लगता है कि डिफ़ॉल्ट रूप से async सच है, जिसका अर्थ है कि सिंकट्रोनिसिलि को कॉल करना, इसलिए क्या आपके पास इस मुद्दे का समाधान है

— Abhi

@abhi, यह jQuery 1 के लिए काम करता है। * इस उत्तर को भी देखें stackoverflow.com/a/11755262/541961

— दिमित्री

Answer 4

मैं इस सरल कार्य के लिए requ.js का उपयोग नहीं करना चाहता था, इसलिए मैंने संशोधित कर्चिक के समाधान का उपयोग किया।

function require_template(templateName, cb) {
    var template = $('#template_' + templateName);
    if (template.length === 0) {
        var tmpl_dir = './templates';
        var tmpl_url = tmpl_dir + '/' + templateName + '.tmpl';
        var tmpl_string = '';

        $.ajax({
            url: tmpl_url,
            method: 'GET',
            contentType: 'text',
            complete: function (data, text) {
                tmpl_string = data.responseText;
                $('head').append('<script id="template_' + templateName + '" type="text/template">' + tmpl_string + '<\/script>');
                if (typeof cb === 'function')
                    cb('tmpl_added');
            }
        });
    } else {
        callback('tmpl_already_exists');
    }
}

require_template('a', function(resp) {
    if (resp == 'tmpl_added' || 'tmpl_already_exists') {
        // init your template 'a' rendering
    }
});
require_template('b', function(resp) {
    if (resp == 'tmpl_added' || 'tmpl_already_exists') {
        // init your template 'b' rendering
    }
});

उन्हें जावास्क्रिप्ट ऑब्जेक्ट में संग्रहीत करने के बजाय दस्तावेज़ों को टेम्प्लेट करने के लिए क्यों? क्योंकि उत्पादन संस्करण में मैं पहले से ही शामिल सभी टेम्पलेट्स के साथ html फ़ाइल उत्पन्न करना चाहूंगा, इसलिए मुझे कोई अतिरिक्त अजाक्स अनुरोध करने की आवश्यकता नहीं होगी। और एक ही समय में मुझे अपने कोड में कोई भी रिफैक्टरिंग करने की आवश्यकता नहीं होगी, जैसा कि मैं उपयोग करता हूं

this.template = _.template($('#template_name').html());

मेरे बैकबोन विचारों में।

Comments

साथ ही इसका उपयोग करना, यह उस scenerio के लिए बहुत अच्छा है जहाँ मैं TDD के लिए जैस्मीन का उपयोग करने की कोशिश कर रहा हूं और इससे पहले कि मैं आवश्यकता और उसके textjs प्लगइन को लागू करने के लिए टेम्प्लेट का परीक्षण कर सकूं। अच्छी तरह से @Tramp

— निकोलस मरे

$ .Ajax के लिए कॉल अतुल्यकालिक है, परिणामों के आधार पर कुछ भी, लौटाए गए वादे के किए गए तरीके के भीतर निष्पादित किया जाना चाहिए।

— जोशरस

इसके लिए धन्यवाद। मै उसका इस्तेमाल किया। एक सुझाव: स्क्रिप्ट टैग के रूप में अपील करने का कोई कारण नहीं है - बस आगे बढ़ सकता है और एक टेम्पलेट में परिवर्तित कर सकता है और इसे लुक-अप हैश में रख सकता है। यहाँ (गैर-कार्यात्मक)

— फ़ाइडल

async: falseअब पदावनत किया गया है

— ProblemsOfSumit

जब async: falseसे पदावनत किया गया है, मैंने completeकॉलबैक जोड़कर उत्तर में सुधार किया ।

— अलेक्जेंडर

Answer 5

यह विषय से थोड़ा हटकर हो सकता है, लेकिन आप ग्रंट (http://gruntjs.com/) का उपयोग कर सकते हैं - जो नोड से चलता है। (http://nodejs.org/, सभी प्रमुख प्लेटफार्मों के लिए उपलब्ध) कार्यों को चलाने के लिए। कमांड लाइन। इस टूल के लिए प्लगइन्स का एक गुच्छा है, जैसे टेम्पलेट कंपाइलर, https://npmjs.org/package/grunt-contrib-jst । GitHub, https://github.com/gruntjs/grunt-contrib-jst पर प्रलेखन देखें । (आपको नोड पैकेज मैनेजर, https://npmjs.org/ को चलाने के तरीके को भी समझना होगा । चिंता न करें, यह अविश्वसनीय रूप से आसान और बहुमुखी है।)

फिर आप अपने सभी टेम्प्लेटों को अलग-अलग html फाइलों में रख सकते हैं, उन सभी को अंडरस्कोर (जो मुझे लगता है कि JST प्लगइन के लिए एक निर्भरता है, का उपयोग करके प्रीफ़ाइल करने के लिए उपकरण चलाते हैं, लेकिन चिंता न करें, नोड पैकेज मैनेजर आपके लिए निर्भरता को स्वतः स्थापित करेगा)।

यह आपके सभी टेम्प्लेट को एक स्क्रिप्ट में संकलित करता है, कहते हैं

templates.js

स्क्रिप्ट लोड करने से डिफ़ॉल्ट रूप से एक वैश्विक - "JST" सेट हो जाएगा - जो कि एक प्रकार का कार्य है, और इसे इस तरह एक्सेस किया जा सकता है:

JST['templates/listView.html']()

जो के समान होगा

_.template( $('#selector-to-your-script-template'))

यदि आप उस स्क्रिप्ट टैग की सामग्री को (टेम्प्लेट /) listView.html में डालते हैं

हालाँकि, असली किकर यह है: ग्रंट इस कार्य के साथ आता है जिसे 'वॉच' कहा जाता है, जो मूल रूप से आपके स्थानीय grunt.js फ़ाइल (जो मूल रूप से आपके ग्रंट प्रोजेक्ट के लिए एक कॉन्फिग फ़ाइल है, जावास्क्रिप्ट में है) में परिवर्तन की निगरानी करता है। )। यदि आपके पास यह कार्य टाइप करके, आपके लिए शुरू किया गया है:

grunt watch

कमांड लाइन से, ग्रंट आपके द्वारा फ़ाइलों में किए गए सभी परिवर्तनों की निगरानी करेगा और उन सभी कार्यों को ऑटो-निष्पादित करेगा जो आपके लिए उस grunt.js फ़ाइल में सेटअप हैं यदि यह परिवर्तनों का पता लगाता है - जैसे ऊपर वर्णित jst कार्य। संपादित करें और फिर अपनी फ़ाइलों को सहेजें, और आपके सभी टेम्पलेट एक जेएस फ़ाइल में पुन: व्यवस्थित करते हैं, भले ही वे कई निर्देशिकाओं और उपनिर्देशिकाओं में फैले हों।

इसी तरह के कार्यों को आपकी जावास्क्रिप्ट को लिंट करने, परीक्षण चलाने, अपनी स्क्रिप्ट फ़ाइलों को संक्षिप्त और छोटा / छोटा करने के लिए कॉन्फ़िगर किया जा सकता है। और सभी को वॉच टास्क से जोड़ा जा सकता है इसलिए आपकी फ़ाइलों में परिवर्तन स्वचालित रूप से आपके प्रोजेक्ट के एक नए 'बिल्ड' को ट्रिगर करेगा।

चीजों को सेट करने और समझने में कुछ समय लगता है कि grunt.js फ़ाइल को कैसे कॉन्फ़िगर करें, लेकिन यह अच्छी तरह से, निवेश किए गए समय के लायक है, और मुझे नहीं लगता कि आप कभी भी काम करने के पूर्व-ग्रन्ट तरीके से वापस जाएंगे

Comments

पसंदीदा उत्तर। यह स्वीकृत उत्तर होना चाहिए। (मेरा नहीं)

— ब्रायन जेनिसियो

ग्रन्ट के लिए अच्छा प्रवेश बिंदु। यह सादे HTML के लिए ठीक काम करता है, लेकिन अगर मेरे पास <% = मूल्य%> या समान है तो मुझे मिलता है: अप्रत्याशित टोकन =,

— ग्रंट

मैं इस दृष्टिकोण (JST का उपयोग करके) को पसंद कर रहा हूं, सिवाय इसके कि मुझे यह करने में समस्या हो रही है: template: JST['test.html']()यह JST से डेटा लोड करना प्रतीत नहीं होता है :( मेरा प्रश्न यहां देखें: stackoverflow.com/questions/29723392/… )

— तिमच

Answer 6

मुझे लगता है कि यह है कि तुम क्या मदद कर सकता है है। समाधान में सब कुछ require.jsलाइब्रेरी के चारों ओर घूमता है जो एक जावास्क्रिप्ट फ़ाइल और मॉड्यूल लोडर है।

ऊपर दिए गए लिंक पर ट्यूटोरियल बहुत अच्छी तरह से दिखाता है कि एक बैकबोन प्रोजेक्ट कैसे व्यवस्थित किया जा सकता है। एक नमूना कार्यान्वयन भी प्रदान किया जाता है। उम्मीद है की यह मदद करेगा।

Comments

मेरी साइट के संदर्भ के लिए धन्यवाद, किसी को भी देखने के लिए मैंने एक परियोजना शुरू की है जो सर्वोत्तम प्रथाओं को लागू करने की कोशिश करती है backboneboilerplate.com

— थॉमस डेविस

Answer 7

मुझे javascript templating पर दिलचस्पी हुई और अब मैं बैकबोन के साथ पहला कदम उठा रहा हूं। यह वही है जिसके साथ मैं आया था और बहुत अच्छा काम करता है।

window.App = {

    get : function(url) {
        var data = "<h1> failed to load url : " + url + "</h1>";
        $.ajax({
            async: false,
            url: url,
            success: function(response) {
                data = response;
            }
        });
        return data;
    }
}

App.ChromeView = Backbone.View.extend({
    template: _.template( App.get("tpl/chrome.html") ),
    render: function () {
        $(this.el).html(this.template());
        return this;
    },
});

App.chromeView = new App.ChromeView({ el : document.body });
App.chromeView.render();

Comments

आपके getफ़ंक्शन पर, मैं शायद $.ajaxखुद को वापस कर दूंगा ताकि यह एक वादा वस्तु लौटाए ताकि यदि आपका टेम्पलेट तुरंत जवाब न दे।

— डेनिस रॉन्गो

Answer 8

मुझे अपने लिए काम करने के लिए डेटा प्रकार "पाठ" पर सेट करना पड़ा:

get : function(url) {
    var data = "<h1> failed to load url : " + url + "</h1>";
    $.ajax({
        async: false,
        dataType: "text",
        url: url,
        success: function(response) {
            data = response;
        }
    });
    return data;
}

Answer 9

मुझे एक समाधान मिला जो jQuery का उपयोग करके मेरे लिए काम करता है।

मैं मुख्य HTML फ़ाइल में jQuery.load () विधि के साथ अंडरस्कोर टेम्पलेट कोड जोड़ता हूं।

एक बार जब यह वहाँ है, तो मैं इसे टेम्पलेट्स बनाने के लिए उपयोग कर रहा हूं। सभी को समकालिक होने की आवश्यकता है!

अवधारणा है:

मेरे पास अंडरस्कोर मैप टेम्प्लेट कोड है:

<!-- MAP TEMPLATE-->
<script type="text/template" id="game-map-template">
    <% _.each(rc, function(rowItem, index){ %>
      <ul class="map-row" data-row="<%- index %>">
        <li class="map-col <%- colItem.areaType ? 'active-area' : '' %>"></li>
        ...
</script>

और मैंने उस कोड को map-template.html नामक फ़ाइल में डाल दिया

उसके बाद मैं टेम्पलेट फ़ाइलों के लिए एक रैपर बनाता हूं।

<div id="templatesPool"></div>

फिर मैं उस फाइल को अपनी मुख्य html फाइल में शामिल करता हूं जैसे कि।

सिर में:

<!-- Template Loader -->
<script> 
    $(function(){
      $("#templatesPool").append($('<div>').load("map-template.html")); 
    });
</script> 

चीयर्स।

Answer 10

मुझे पता है कि यह प्रश्न वास्तव में पुराना है, लेकिन यह अंडरस्कोर अजाक्स टेम्प्लेट के लिए Google खोज पर पहला परिणाम आया।

मैं इसके लिए एक अच्छा समाधान नहीं पाकर थक गया था इसलिए मैंने अपना खुद का बनाया:

https://github.com/ziad-saab/underscore-async-templates

AJAX का उपयोग करके अंडरस्कोर टेम्प्लेट लोड करने के अलावा, इसमें <% शामिल%> कार्यक्षमता है। मुझे उम्मीद है कि यह किसी के लिए उपयोगी हो सकता है।

Answer 11

मैं एक समान रूप से कार्य करने के लिए jQuery मजबूर करने के लिए थोड़ा असहज था, इसलिए मैंने वादों का उपयोग करके पिछले तुल्यकालिक उदाहरण को संशोधित किया। यह बहुत समान है, लेकिन अतुल्यकालिक रूप से चलता है। मैं इस उदाहरण में एचबीएस टेम्पलेट का उपयोग कर रहा हूं:

var asyncRenderHbs= function(template_name, template_data) {
    if (!asyncRenderHbs.template_cache) { 
        asyncRenderHbs.template_cache= {};
    }

    var promise= undefined;

    if (!asyncRenderHbs.template_cache[template_name]) {
        promise= new Promise(function(resolve, reject) {
            var template_url= '/templates/' + template_name;
            $.ajax({
                url: template_url,
                method: 'GET',
                success: function(data) {
                    asyncRenderHbs.template_cache[template_name]= Handlebars.compile(data);
                    resolve(asyncRenderHbs.template_cache[template_name](template_data));
                },
                error: function(err, message) {
                    reject(err);
                }           
            });
        });
    } else {
        promise= Promise.resolve(asyncRenderHbs.template_cache[template_name](template_data));
    }

    return promise;
};

तब प्रदान किए गए HTML का उपयोग करने के लिए:

asyncRenderHbs('some_template.hbs', context)
    .then(function(html) {
        applicationMain.append(html);
        // Do other stuff here after html is rendered...
    })
    .catch(function(err) {
        // Handle errors
    });

नोट: जैसा कि दूसरों द्वारा चर्चा की गई है, सभी टेम्पलेट्स को एक ही टेम्प्लेट में संकलित करना बेहतर होगा। जेएस फ़ाइल और लोड करें कि शुरुआत में वेबपेज लोड होने पर टेम्प्लेट प्राप्त करने के लिए कई छोटे तुल्यकालिक AJAX कॉल होते हैं।

Answer 12

आगे चेतावनी - यहाँ ड्रेगन हो:

मैं नीचे दिए गए दृष्टिकोण का उल्लेख करता हूं, जो ASP.NET स्टैक (और इसी तरह के फ्रेमवर्क) बनाने के लिए संघर्ष करने वालों की मदद करता है। यह बिना कहे चला जाता है कि यह एक सामान्य समाधान नहीं है। यह कहने के बाद ...

/ endforwardwarning

यदि आप ASP.NET का उपयोग कर रहे हैं, तो आप अपने टेम्प्लेट को अपने स्वयं के एक या एक से अधिक आंशिक विचारों के अंदर रख कर बाहरी बना सकते हैं। अपने .cshml के अंदर आका:

  @Html.Partial("path/to/template")

अपने टेम्पलेट के अंदर .shtml:

   // this is razorview and thusly if you ever need to use the @ character in here  
   // you will have to either escape it as @@ or use the html codepoint which is &#64
   // http://stackoverflow.com/questions/3626250/escape-character-in-razor-view-engine
   <script type="text/x-template" id="someId">
        <span class="foo"><%= name %></span>
   </script>

और अब आप हमेशा की तरह टेम्पलेट का उपयोग कर सकते हैं:

  _.template($("#someId").html())({ name: "Foobar" });

आशा है कि यह मायावी-स्पष्ट दृष्टिकोण किसी को एक घंटे के मूल्य के सिर को खरोंचने से बचाने में मदद करता है।