javascript - tutorial - w3schools




আন্ডারস্কোর মধ্যে বাহ্যিক টেমপ্লেট (8)

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

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

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

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

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

কিন্তু এটা কাজ করে নি।


আমি jQuery ব্যবহার করে আমার জন্য কাজ করে একটি সমাধান খুঁজে পাওয়া যায় নি।

আমি jQuery.load () পদ্ধতির সাথে, মূল HTML ফাইলে আন্ডারস্কোর টেমপ্লেট কোড যুক্ত করি।

একবার এটি আছে, আমি টেমপ্লেট তৈরি করার জন্য এটি ব্যবহার করছি। সবকটি একযোগে ঘটতে হবে!

ধারণাটি হল:

আমি একটি underscore মানচিত্র টেমপ্লেট কোড আছে:

<!-- 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 নামক একটি ফাইলে রাখি

তারপরে আমি টেমপ্লেট ফাইলের জন্য aa aa wrapper তৈরি করি।

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

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

মাথায়

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

চিয়ার্স।


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

আমি এই জন্য একটি ভাল সমাধান না খুঁজে ক্লান্ত ছিল তাই আমি নিজের তৈরি:

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

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


আমি জাভাস্ক্রিপ্ট 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();

এই মিশ্রণ আপনাকে আন্ডারস্কোর ব্যবহার করে খুব সহজ ভাবে ব্যবহার করে বহিরাগত টেমপ্লেটটি রেন্ডার করতে দেয়: _.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"});

এখানে একটি সহজ সমাধান:

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. আপনি স্ট্যাটিক dir মধ্যে পৃথক HTML ফাইলে প্রতিটি টেমপ্লেট সংরক্ষণ করতে পারবেন
  2. খুব হালকা
  3. কম্পাইল এবং ক্যাশে টেমপ্লেট
  4. সংক্ষিপ্ত বিবরণ টেমপ্লেট লোড যুক্তি। উদাহরণস্বরূপ, ভবিষ্যতে আপনি preloaded এবং precompiled টেম্পলেট ব্যবহার করতে পারেন।
  5. ব্যবহার করা সহজ

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

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

মূলত, আপনি যোগ করা আবশ্যক

dataType: 'html'

$ .ajax অনুরোধ করতে।


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

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

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

templates.js

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

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

যা অনুরূপ হবে

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

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

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

grunt watch

কমান্ড লাইন থেকে, গ্রান্ট আপনাকে ফাইলগুলিতে করা সমস্ত পরিবর্তনগুলি মনিটর করবে এবং যে grants.js ফাইলে এটির জন্য সেটআপ করা আছে তার জন্য সমস্ত কাজ স্বয়ংক্রিয়ভাবে সম্পাদন করুন যদি এটি পরিবর্তনগুলি সনাক্ত করে - যেমন উপরে বর্ণিত jst টাস্ক। আপনার ফাইলগুলি সম্পাদনা করুন এবং তারপরে সেগুলি সংরক্ষণ করুন এবং আপনার সমস্ত টেমপ্লেটগুলি একটি জেস ফাইলে পুনরায় কম্পাইল করা হয়, এমনকি যদি তারা বেশ কয়েকটি ডিরেক্টরি এবং উপড্রাইরেক্টরিতে ছড়িয়ে পড়ে।

অনুরূপ কাজ আপনার জাভাস্ক্রিপ্ট, চলমান পরীক্ষা, concatenating এবং আপনার স্ক্রিপ্ট ফাইল minifying / কনফিগার করার জন্য কনফিগার করা যেতে পারে। এবং সকলকে ঘড়ির কার্যের সাথে সংযুক্ত করা যেতে পারে যাতে আপনার ফাইলগুলিতে পরিবর্তনগুলি স্বয়ংক্রিয়ভাবে আপনার প্রকল্পের একটি নতুন 'বিল্ড' ট্রিগার করে।

জিনিসগুলি সেট আপ করার জন্য কিছু সময় লাগে এবং grunt.js ফাইলটি কীভাবে কনফিগার করতে হয় তা বোঝার জন্য সময় লাগে, কিন্তু এটি ভাল, বিনিয়োগের সময়টি ভালভাবে মূল্যবান, এবং আমি মনে করি না যে আপনি কখনও কাজ করার প্রাক্ক্রান্ত পদ্ধতিতে ফিরে যাবেন


ফরওয়ার্ড সতর্কতা - এখানে ড্রাগন হতে হবে:

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

/ endforwardwarning

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

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

আপনার টেম্পলেট.cshtml ভিতরে:

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

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





underscore.js