অ্যান্ডস্কোরে বাহ্যিক টেম্পলেট

Question

আমি অ্যান্ডস্কোর টেম্পলেট ব্যবহার করি । টেম্পলেট হিসাবে কোনও বাহ্যিক ফাইল সংযুক্ত করা সম্ভব ?

ব্যাকবোন ভিউতে আমার রয়েছে:

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

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

আমার এইচটিএমএল এ:

<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

সম্পাদনা: এই উত্তরটি পুরানো এবং পুরানো। আমি এটি মুছে ফেলতাম, তবে এটি "স্বীকৃত" উত্তর। আমি পরিবর্তে আমার মতামত ইনজেকশন করব।

আমি আর এই কাজ করার পক্ষে কথা বলব না। পরিবর্তে, আমি সমস্ত টেমপ্লেটগুলি পৃথক এইচটিএমএল ফাইলগুলিতে আলাদা করব। কেউ কেউ এই অ্যাসিনক্রোনালি লোড করার পরামর্শ দিবেন (প্রয়োজনীয়.জেএস বা প্রকারের টেম্পলেট ক্যাশে)। এটি ছোট প্রকল্পগুলিতে ভাল কাজ করে তবে প্রচুর টেমপ্লেট সহ বৃহত প্রকল্পগুলিতে, আপনি নিজেকে পেজ লোডে এক টন ছোট অ্যাসিঙ্ক অনুরোধ করছেন যা আমি সত্যিই অপছন্দ করি। (ওহ ... ঠিক আছে, আপনি r.js দিয়ে আপনার প্রাথমিক নির্ভরতা প্রাক-সংকলন করে Require.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 ব্যাকবোন.জেএস এর বিকাশের জগতে সত্যই দীর্ঘকাল আগে :)

— ব্রায়ান জিনিসিও

আসলে, আমি এই উত্তরটি মুছতে চাই তবে আমি তা গ্রহণ করতে পারি না কারণ এটি অনুমোদিত উত্তর। এটি পুরানো এবং এর চেয়ে আরও ভাল সমাধান রয়েছে। আজ, আমি তাদের পৃথক টেম্পলেট ফাইল হিসাবে থাকতে পারি এবং পৃথকভাবে এগুলি সমস্ত আনার সংশ্লেষ এড়ানোর জন্য এগুলি একটি পৃথক টেম্পলেট.জেএস ফাইল হিসাবে গড়ে তুলতে একটি গ্রান্ট টাস্ক (জেএসটি, উদাহরণস্বরূপ) ব্যবহার করব। এটি উভয় বিশ্বের আইএমও পদ্ধতির মধ্যে সেরা।

— ব্রায়ান জেনিসিও

ভাল যদি খুব বেশি টেম্পলেট না থাকে তবে আমি মনে করি যে পূর্বের সমাধানটি সবচেয়ে কার্যকর most

— সিল্কএডমিন

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);
}

এখানে "অ্যাসিঙ্ক: মিথ্যা" ব্যবহার করা কোনও খারাপ উপায় নয় কারণ যে কোনও ক্ষেত্রে আপনাকে অবশ্যই টেমপ্লেট লোড হওয়া পর্যন্ত অপেক্ষা করতে হবে।

সুতরাং, "রেন্ডার" ফাংশন

1. আপনাকে প্রতিটি টেমপ্লেটকে স্ট্যাটিক ডিয়ারে পৃথক এইচটিএমএল ফাইলে সঞ্চয় করতে দেয়
2. খুব হালকা ওজন
3. সংকলন এবং ক্যাশে টেমপ্লেট
4. টেমপ্লেট লোড যুক্তি বিমূর্ত। উদাহরণস্বরূপ, ভবিষ্যতে আপনি প্রিলোলোডড এবং প্রাকম্পম্পাইল টেম্পলেটগুলি ব্যবহার করতে পারেন।
5. ব্যবহার করা সহজ

[আমি কোনও মন্তব্য দেওয়ার পরিবর্তে উত্তরটি সম্পাদনা করছি কারণ আমি বিশ্বাস করি যে এটি গুরুত্বপূর্ণ]

যদি টেমপ্লেটগুলি দেশীয় অ্যাপ্লিকেশনটিতে প্রদর্শিত না হচ্ছে এবং আপনি দেখুন HIERARCHY_REQUEST_ERROR: DOM Exception 3, ডেভ রবিনসনের উত্তরটি দেখুন যা হুবহু "হায়ারচারওয়াইভিএকিউএসএইএসআরআর: ডম এক্সপেশন 3" -ররর কারণ হতে পারে? ।

মূলত, আপনাকে অবশ্যই যুক্ত করতে হবে

dataType: 'html'

aj .জ্যাক্স অনুরোধ।

Comments

@ বাইনারি নাইটস - ঠিক dataType: 'html'আমাদের ক্ষেত্রে কি আমাদের সর্বদা আমাদের এজ্যাক্স অনুরোধটি যুক্ত করা উচিত ?

— ম্যাট

এই কাজটিও নেস্টেড দর্শনের জন্য? দৃশ্যত যদি অন্য ভিউকে বোঝায় তবে আমি এটি কাজ করতে পারি না।

— টি। রসি

হ্যাঁ, এটি নেস্টেড টেম্পলেটগুলির জন্যও কাজ করা উচিত। কেবল রেন্ডার সহায়ক যোগ করুন এবং এটিকে কল করুন: <% = রেন্ডার ('নেস্টেড_টেমপ্লেট', ডেটা)%>

— কোরচিক

হ্যালো, আপনি কি "সংকলন এবং ক্যাশে টেম্পলেট" সম্পর্কে আরও কিছুটা ব্যাখ্যা করতে পারেন? যখন আমি রেন্ডার ফাংশনটিতে কল করার চেষ্টা করেছি তখন এটি tmpl_data মান ফেরত যোগ করে না, এটি ঠিক যেমন এটি পাস করেছে। এর পরে আমাকে "Handlebars.compile" পদ্ধতিটি কল করতে হয়েছিল। ধন্যবাদ.

— সিডাগলি

Answer 3

এই mixin আপনি ব্যবহার বহিরাগত টেমপ্লেট রেন্ডার করতে পারবেন আন্ডারস্কোর খুব সহজ ভাবে: _.templateFromUrl(url, [data], [settings])। মেথড এপিআই প্রায় আন্ডারস্কোরের _.টিম্পলেট () এর মতো । ক্যাচিং অন্তর্ভুক্ত।

_.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 দরকার, তবে আপনি কোডের এমন কিছু অংশ পুনরায় লিখতে পারেন যা অন্য কোনও লাইব্রেরি ব্যবহার করে আপনার স্বাদে টেমপ্লেটটি এজেএক্সের মাধ্যমে লোড করে।

— দিমিত্রি

@Dmitriy ASYNC: মিথ্যা নিন্দা করা হয়েছে, তাই যদি আমি বাইরে ASYNC কল পরামিতি তার কাজ করছে না, আমি মনে করি এই কারণে ডিফল্ট ASYNC দ্বারা সত্য মানে syncronisilly কলিং হয়, তাই আপনি এই সমস্যার জন্য সমাধান আছে কি

— Abhi

@ ইতি, এটি jQuery ১ এর জন্য কাজ করে 1. * এছাড়াও এই উত্তরটি দেখুন stackoverflow.com/a/11755262/541961

— দিমিত্রি

Answer 4

আমি এই সাধারণ কাজের জন্য প্রয়োজনীয়.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
    }
});

টেমপ্লেটগুলিকে জাভাস্ক্রিপ্ট অবজেক্টে সংরক্ষণের পরিবর্তে নথিতে কেন যুক্ত করবেন? কারণ উত্পাদনের সংস্করণে আমি ইতিমধ্যে অন্তর্ভুক্ত সমস্ত টেম্পলেটগুলির সাথে এইচটিএমএল ফাইল তৈরি করতে চাই, সুতরাং আমার কোনও অতিরিক্ত এজাক্স অনুরোধ করার প্রয়োজন হবে না। এবং একই সাথে আমার কোডগুলিতে আমার কোনও রিফ্যাক্টরিং করার প্রয়োজন হবে না I

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

আমার ব্যাকবোন মতামত।

Comments

এটি পাশাপাশি ব্যবহার করা, এটি দৃশ্যের জন্য দুর্দান্ত যেখানে আমি টিডির জন্য জেসমিন ব্যবহার করার চেষ্টা করছি এবং প্রয়োজনীয়js এবং এর টেক্সটজ প্লাগইন প্রয়োগ করার আগে টেমপ্লেটগুলি পরীক্ষা করতে চাই। ভাল হয়েছে @ ট্রাম্প

— নিকোলাস মারে

Aj .জ্যাক্স-এ কলটি অ্যাসিনক্রোনাস, ফলাফলের উপর নির্ভর করে যে কোনও কিছুই প্রত্যাশিত প্রতিশ্রুতি সম্পন্ন পদ্ধতিতে কার্যকর করা উচিত।

— জোশরোস

এর জন্য ধন্যবাদ. আমি এটি ব্যবহার করেছি। একটি পরামর্শ: স্ক্রিপ্ট ট্যাগ হিসাবে যুক্ত করার কোনও কারণ নেই - কেবল এগিয়ে গিয়ে কোনও টেমপ্লেটে রূপান্তর করতে এবং এটি লুক-হ্যাশে রাখতে পারে। এখানে একটি (অ-কার্যকরী) ফিডাল

— ওয়েবনেস্টো

async: falseএখন

— সমস্যাগুলি

যেহেতু async: falseঅবহেলিত, আমি completeকলব্যাক যোগ করে উত্তরটি উন্নত করেছি ।

— আলেকজান্ডার

Answer 5

এটি সামান্য সামান্য বিষয় হতে পারে তবে আপনি গ্রান্ট (http://gruntjs.com/) ব্যবহার করতে পারেন - যা নোড.জেজে চালিত হয় (http://nodejs.org/, সমস্ত বড় প্ল্যাটফর্মের জন্য উপলব্ধ) এর থেকে কাজগুলি চালনার জন্য কমান্ড লাইন এই সরঞ্জামের জন্য একটি গুচ্ছ প্লাগইন রয়েছে, যেমন টেম্পলেট সংকলক, https://npmjs.org/package/grunt-contrib-jst । গিটহাব, https://github.com/gruntjs/grunt-contrib-jst এ ডকুমেন্টেশন দেখুন । (আপনাকে কীভাবে নোড প্যাকেজ ম্যানেজার চালাতে হবে তা বুঝতে হবে, https://npmjs.org/ । চিন্তা করবেন না, এটি অবিশ্বাস্যভাবে সহজ এবং বহুমুখী।)

এরপরে আপনি আপনার সমস্ত টেমপ্লেটকে পৃথক এইচটিএমএল ফাইলগুলিতে রাখতে পারেন, আন্ডারস্কোর ব্যবহার করে সেগুলি সমস্ত পূর্ববর্তীকরণের জন্য সরঞ্জামটি চালাতে পারেন (যা আমি বিশ্বাস করি যে জেএসটি প্লাগইনের জন্য নির্ভরতা, তবে চিন্তা করবেন না, নোড প্যাকেজ ম্যানেজার আপনার জন্য নির্ভরতা স্বয়ংক্রিয়ভাবে ইনস্টল করবে)।

এটি আপনার সমস্ত টেমপ্লেটকে একটি স্ক্রিপ্টে সংকলন করে, বলুন

templates.js

স্ক্রিপ্টটি লোড করা গ্লোবাল সেট করে - "জেএসটি" ডিফল্টরূপে - যা ফাংশনগুলির একটি অ্যারে, এবং এর মতো অ্যাক্সেস করা যায়:

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

যা অনুরূপ হবে

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

যদি আপনি সেই স্ক্রিপ্ট ট্যাগটির সামগ্রী (টেমপ্লেট /) তালিকাভিউ html এ রেখে দেন put

তবে, আসল কিকারটি হ'ল: গ্রন্টটি 'ওয়াচ' নামক এই টাস্কটির সাথে আসে, যা মূলত আপনার স্থানীয় গ্রান্ট.জেএস ফাইল (যা মূলত আপনার গ্রান্ট প্রকল্পের জন্য জাভাস্ক্রিপ্টে একটি কনফিগার ফাইল) হিসাবে সংজ্ঞায়িত ফাইলগুলির পরিবর্তনগুলি পর্যবেক্ষণ করবে avas )। আপনি যদি টাইপ করে আপনার পক্ষে এই কাজটি শুরু করেন তবে:

grunt watch

কম্যান্ড লাইন থেকে, ঘোঁৎ ঘোঁৎ সমস্ত পরিবর্তন আপনি ফাইল করতে নিরীক্ষণ হবে এবং সব কাজগুলো যদি এটা পরিবর্তন সনাক্ত করে আপনি যে grunt.js ফাইলে এটা জন্য সেটআপ আছে স্বয়ংক্রিয় চালানো - মত JST কাজের উপরে বর্ণিত। আপনার ফাইলগুলি সম্পাদনা করুন এবং তারপরে সংরক্ষণ করুন এবং আপনার সমস্ত টেম্পলেটগুলি একাধিক ডিরেক্টরি এবং উপ-ডিরেক্টরিতে ছড়িয়ে থাকলেও, একটি জেএস ফাইলে রিকম্পাইল করে।

আপনার জাভাস্ক্রিপ্ট প্রলিপ্তকরণ, পরীক্ষা চালানো, আপনার স্ক্রিপ্ট ফাইলগুলিকে সংক্ষিপ্তকরণ এবং মাইনাইফাইং / উগলিফাই করার জন্য অনুরূপ কাজগুলি কনফিগার করা যেতে পারে। এবং সমস্তকে নজরদারি টাস্কে আবদ্ধ করা যেতে পারে তাই আপনার ফাইলগুলিতে পরিবর্তনগুলি স্বয়ংক্রিয়ভাবে আপনার প্রকল্পের একটি নতুন 'বিল্ড' ট্রিগার করবে।

জিনিসগুলি সেট আপ করতে এবং গ্রেন্ট.জেএস ফাইলটি কীভাবে কনফিগার করতে হয় তা বুঝতে কিছু সময় লাগে তবে এটি ভালভাবে বিনিয়োগ করা সময়ের জন্য উপযুক্ত এবং আমি মনে করি না আপনি কখনই প্রাক-গ্রান্টের কাজ করতে ফিরে যাবেন I

Comments

প্রিয় উত্তর। এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। (আমার নয়)

— ব্রায়ান জেনিসিও

ভাল প্রবেশের পয়েন্ট। এটি প্লেইন এইচটিএমএলটির জন্য দুর্দান্ত কাজ করে তবে আমার কাছে <% = মূল্য%> বা অনুরূপ থাকলে আমি পেয়েছি: অপ্রত্যাশিত টোকেন =, গ্রান্ট থেকে সংকলন করতে ব্যর্থ হয়েছে

— ম্যাকটিমো 28:38

আমি এই পদ্ধতির (জেএসটি ব্যবহার করে) পছন্দ করছি, ব্যতীত আমার এটি করতে সমস্যা template: JST['test.html']()হচ্ছে:, এটি জেএসটি থেকে ডেটা লোড করছে বলে মনে হয় না :( (আমার প্রশ্নটি এখানে দেখুন: stackoverflow.com/questions/29723392/… )

— টিমহ্যাক 22

Answer 6

আমি মনে করি এই কি আপনি সাহায্য পারে। সমাধানের সবকিছু require.jsলাইব্রেরির চারদিকে ঘোরে যা একটি জাভাস্ক্রিপ্ট ফাইল এবং মডিউল লোডার।

উপরের লিঙ্কটির টিউটোরিয়ালটি খুব সুন্দরভাবে দেখায় যে কীভাবে একটি ব্যাকবোন প্রকল্পটি সংগঠিত করা যায়। একটি নমুনা বাস্তবায়নও সরবরাহ করা হয়। আশাকরি এটা সাহায্য করবে.

Comments

আমার সাইটের রেফারেন্সের জন্য ধন্যবাদ, যে কারও সন্ধানের জন্য আমি একটি প্রকল্প শুরু করেছি যা সেরা অনুশীলনগুলি backboneboilerplate.com

— টমাস ডেভিস

Answer 7

আমি জাভাস্ক্রিপ্ট টেম্পলেটিংয়ে আগ্রহী এবং এখন আমি ব্যাকবোন দিয়ে প্রথম পদক্ষেপ নিচ্ছি taking এটিই আমি নিয়ে এসেছি এবং বেশ ভালভাবে কাজ করছে বলে মনে হচ্ছে।

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 ব্যবহার করে।

আমি মূল এইচটিএমএল ফাইলটিতে 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>

এবং আমি সেই কোডটি ম্যাপ-টেম্পলেট। Html নামে একটি ফাইলে রেখেছি

এর পরে আমি টেমপ্লেট ফাইলগুলির জন্য আ র্যাপার তৈরি করি।

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

তারপরে আমি সেই ফাইলটিকে আমার প্রধান এইচটিএমএল ফাইলটিতে অন্তর্ভুক্ত করব।

মাথায়:

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

চিয়ার্স।

Answer 10

আমি জানি এই প্রশ্নটি সত্যই পুরানো তবে এটি আন্ডারস্কোর অ্যাজাক্স টেম্পলেটগুলির জন্য গুগল অনুসন্ধানে প্রথম ফলাফল হিসাবে এসেছে।

আমি এর জন্য ভাল সমাধান না পেয়ে ক্লান্ত হয়ে পড়েছিলাম তাই আমি নিজের তৈরি করেছি:

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

এজেএক্স ব্যবহার করে আন্ডারস্কোর টেম্পলেটগুলি লোড করা ছাড়াও এটি <% অন্তর্ভুক্ত%> কার্যকারিতা যুক্ত করে। আমি আশা করি এটি কারও কাজে লাগতে পারে।

Answer 11

আমি কিছুটা অস্বস্তিতে জিকিউরিটিকে সিঙ্ক্রোনালি কাজ করতে বাধ্য করছিলাম, তাই আমি প্রতিশ্রুতি ব্যবহার করে পূর্ববর্তী সিঙ্ক্রোনাস উদাহরণটি সংশোধন করেছি। এটি বেশ প্রায় একই, তবে অ্যাসিঙ্ক্রোনালি চালায়। আমি এই উদাহরণে hbs টেম্পলেট ব্যবহার করছি:

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;
};

তারপরে রেন্ডার করা এইচটিএমএল ব্যবহার করতে:

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

দ্রষ্টব্য: অন্যদের দ্বারা আলোচিত হিসাবে, সমস্ত টেমপ্লেটগুলিকে একটি একক টেম্পলেট.জেএস ফাইলগুলিতে সংকলন করা এবং ওয়েবপৃষ্ঠা লোড হওয়ার সাথে সাথে টেমপ্লেট পেতে অনেকগুলি ছোট সিঙ্ক্রোনাস এজেএক্স কল করার পরিবর্তে শুরুতে লোড করা ভাল।

Answer 12

ফরোয়ার্ড সতর্কতা - এখানে ড্রাগন থাকুন:

আমি এএসপি.নেট স্ট্যাকগুলি (এবং অনুরূপ ফ্রেমওয়ার্কগুলি) জেএস-লিবের বাস্তুতন্ত্রের সাথে সুরেলাভাবে কাজ করতে সহায়তা করার জন্য নীচে দেখানো পদ্ধতির উল্লেখ করছি। এটি কোনও জেনেরিক সমাধান নয় বলে বলে চলে যায়। যে বলে ...

/ endforwardwarning

আপনি যদি এএসপি.এনইটি ব্যবহার করছেন তবে আপনি নিজের টেমপ্লেটগুলিকে কেবল তাদের নিজস্ব বা একাধিক আংশিক দৃশ্যের ভিতরে রেখে বাহ্যিক করতে পারেন। আপনার .cshtml এর ভিতরে আকা:

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

আপনার টেমপ্লেটের অভ্যন্তরে

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

আশা করি এই অধরা-স্পষ্ট পদ্ধতির সাহায্যে কাউকে এক ঘন্টা মূল্যমানের মাথা চুলকানো বাঁচাতে সহায়তা করে।