125

আমি একটি অ্যারে পেয়েছি যা আমি লুপ করছি। প্রতিবার শর্ত সত্য হলে আমি HTMLনীচের কোডটির একটি অনুলিপি কিছু মান সহ একটি ধারক উপাদানকে যুক্ত করতে চাই।

স্মার্ট উপায়ে পুনরায় ব্যবহার করতে আমি এই এইচটিএমএলটি কোথায় রাখতে পারি?

<a href="#" class="list-group-item">
    <div class="image">
         <img src="" />
    </div>
    <p class="list-group-item-text"></p>
</a>

JQuery

$('.search').keyup(function() {
    $('.list-items').html(null);

    $.each(items, function(index) {
        // APPENDING CODE HERE
    });
});

javascript jquery json

— প্যাট্রিক রেক
সূত্র

2

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

— সের্গেই স্নেগিরিভ

3

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

— সের্গেই স্নেগিরিভ

1

@BrianG। একটি মন্তব্য পোস্ট করা সত্যিই বোঝায় না যে আপনি যদিও একটি স্পর্শক উপর চলে যাচ্ছেন। যদিও আমি সম্মত হই যে মন্তব্যগুলি তাদের পক্ষে উপযুক্ত স্থান (যতক্ষণ না তারা এখনও প্রাসঙ্গিক) তবুও তারা উত্তর দিয়ে চালানোর সময় নেই এমন লোকদের দ্বারা ড্রাইভ বাই ইঙ্গিতগুলির পক্ষেও উপযুক্ত। আপনি যা করছেন তা পরিষ্কার করে দেওয়ার জন্য এটি ওপিতে সহায়ক।

— মিলিমুজ

কেউ আপনার প্রশ্নের উত্তর দেয়নি, প্যাট্রিক?

— সেবাস্তিয়ান নীরা

164

আপনি আপনার প্রকল্পে একটি টেম্প্লেটিং ইঞ্জিন ব্যবহার করার সিদ্ধান্ত নিতে পারেন, যেমন:

আপনি যদি অন্য কোনও লাইব্রেরি অন্তর্ভুক্ত করতে না চান তবে জন রেসিগ নীচের মত একটি jQuery সমাধান সরবরাহ করে।

ব্রাউজারগুলি এবং স্ক্রিনের পাঠকরা অবিজ্ঞাত স্ক্রিপ্টের প্রকারগুলি উপেক্ষা করে:

<script id="hidden-template" type="text/x-custom-template">
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    <tr>
</script>

JQuery ব্যবহার করে, টেমপ্লেটের উপর ভিত্তি করে সারি যুক্ত করা সাদৃশ্যযুক্ত:

var template = $('#hidden-template').html();

$('button.addRow').click(function() {
    $('#targetTable').append(template);
});

— ম্যাথিজ ফ্লাইট্রা
সূত্র

@ ম্যাক্সিমলুজিক ঠিক আছে। গোঁফ (ট্রেডমার্ক বানানটি নোট করুন) হালকা ওজন এবং ওপির কোডটিতে প্লাগ ইন করবে তবে হ্যান্ডলবার্সের অ্যারে পরিচালনা করার জন্য আরও বৈশিষ্ট্য রয়েছে এবং শেষ পর্যন্ত আরও পর্যাপ্ত সমাধান সরবরাহ করতে পারে। এখানে একটি দুর্দান্ত তুলনা আর্টিকেল: blog.cubettech.com/…

— মাইকেল

13

কীভাবে এখানে টেমপ্লেট সম্পাদনা করবেন তার উদাহরণ: jsfiddle.net/meehanman/7vw8bc84

— ডিন মেহান

175

পুরানো প্রশ্ন, তবে যেহেতু প্রশ্নটি "jQuery ব্যবহার করে" জিজ্ঞাসা করে, তাই আমি ভেবেছিলাম যে আমি কোনও বিকল্প সরবরাহ করব যা আপনাকে কোনও বিক্রেতার নির্ভরতা না পরিচয় করেই এটি করতে দেয়।

সেখানে প্রচুর টেম্প্লেটিং ইঞ্জিনগুলি থাকা অবস্থায়, তাদের অনেকগুলি বৈশিষ্ট্য সম্প্রতি পুনরায় পুনরূদ্ধারে পড়েছে, পুনরাবৃত্তি ( <% for), শর্তসাপেক্ষে ( <% if) এবং রূপান্তরগুলি (<%= myString | uppercase %> ) সেরাকে মাইক্রোল্যাংয়েজ হিসাবে দেখা যায় এবং সবচেয়ে খারাপ সময়ে অ্যান্টি-নিদর্শনগুলির সাথে ছড়িয়ে পড়ে। আধুনিক টেম্প্লেটিং অনুশীলনগুলি কেবল কোনও আইটেমকে তার ডিওএম (বা অন্যান্য) উপস্থাপনে ম্যাপিং করতে উত্সাহ দেয়, উদাহরণস্বরূপ যা আমরা রিঅ্যাক্টজেএস (বিশেষত স্টেটলেস উপাদান) এর উপাদানগুলিতে ম্যাপযুক্ত বৈশিষ্ট্যগুলির সাথে দেখি।

এইচটিএমএলের অভ্যন্তরে টেম্পলেটগুলি

আপনার টেমপ্লেটের জন্য এইচটিএমএলকে আপনার বাকী এইচটিএমএলের পাশে রাখার জন্য যে সম্পত্তির উপর আপনি নির্ভর করতে পারেন তার একটি হ'ল অ-এক্সিকিউটিভ ব্যবহার করে <script> type, যেমন <script type="text/template">। আপনার ক্ষেত্রে:

<script type="text/template" data-template="listitem">
    <a href="${url}" class="list-group-item">
        <table>
            <tr>
                <td><img src="${img}"></td>
                <td><p class="list-group-item-text">${title}</p></td>
            </tr>
        </table>
    </a>
</script>

দস্তাবেজ লোডে, আপনার টেম্পলেটটি পড়ুন এবং একটি সাধারণ ব্যবহার করে এটি টোকনাইজ করুন String#split

var itemTpl = $('script[data-template="listitem"]').text().split(/\$\{(.+?)\}/g);

লক্ষ্য করুন যে আমাদের টোকেন সহ, আপনি এটি বিকল্প [text, property, text, property]বিন্যাসে পাবেন। এটি আমাদের Array#mapম্যাপিং ফাংশন সহ একটি ব্যবহার করে সুন্দরভাবে ম্যাপ করতে দেয়:

function render(props) {
  return function(tok, i) { return (i % 2) ? props[tok] : tok; };
}

যেখানে দেখতে propsপারে { url: 'http://foo.com', img: '/images/bar.png', title: 'Lorem Ipsum' }।

আপনি itemTplউপরের মতো পার্স করেছেন এবং লোড করেছেন তা ধরে নিয়ে এগুলি সবই একত্রে রেখে দেওয়া , এবং আপনার ফাঁকে ফাঁকে ফাঁকে একটি itemsঅ্যারে রয়েছে:

$('.search').keyup(function () {
  $('.list-items').append(items.map(function (item) {
    return itemTpl.map(render(item)).join('');
  }));
});

এই পদ্ধতির এছাড়াও কেবল মাত্র সবে jQuery হয় - আপনার সাথে ভ্যানিলা জাভাস্ক্রিপ্ট ব্যবহার করে একই অভিগমন করতে সক্ষম হওয়া উচিত document.querySelectorএবং .innerHTML।

jsfiddle

জেএস ভিতরে টেমপ্লেট

নিজেকে জিজ্ঞাসা করার একটি প্রশ্ন হ'ল আপনি কি সত্যিই টেমপ্লেটগুলি এইচটিএমএল ফাইল হিসাবে সংজ্ঞায়িত করতে চান / প্রয়োজন? আপনি সর্বদা + টেম্পলেটটিকে একইভাবে সংযুক্ত করতে পারেন আপনি যে জাতীয় জিনিস পুনরাবৃত্তি করতে চান তা একইভাবে পুনরায় ব্যবহার করতে পারেন: একটি ফাংশন সহ।

এসআই-ল্যান্ডে, ডেস্ট্রাকচারিং, টেম্পলেট স্ট্রিং এবং অ্যারো-ফাংশন ব্যবহার করে আপনি $.fn.htmlউপরের পদ্ধতিটি ব্যবহার করে সহজেই লোড করা যায় এমন সরল সুন্দর চেহারা উপাদানগুলি লিখতে পারেন ।

const Item = ({ url, img, title }) => `
  <a href="${url}" class="list-group-item">
    <div class="image">
      <img src="${img}" />
    </div>
    <p class="list-group-item-text">${title}</p>
  </a>
`;

তারপরে আপনি সহজেই এটিকে রেন্ডার করতে পারেন, এমনকি কোনও অ্যারে থেকে ম্যাপ করাও so

$('.list-items').html([
  { url: '/foo', img: 'foo.png', title: 'Foo item' },
  { url: '/bar', img: 'bar.png', title: 'Bar item' },
].map(Item).join(''));

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

— জোশ কেরিবাউ থেকে
সূত্র

1

দুর্দান্ত টেম্পলেট ইঞ্জিন।

— আর্থার কাস্ত্রো

40

জেএস বিভাগের ভিতরে থাকা আপনার টেম্পলেটগুলি বোমাটি রয়েছে

— বিগআরন

2

আপনি কি দয়া করে "এইচটিএমএল এর অভ্যন্তরে টেমপ্লেটগুলি" পদ্ধতির জন্য একটি ডেমো / ফিডল যুক্ত করতে পারেন?

— এলসিজে

1

কি দারুন! জেএসের অভ্যন্তরে টেমপ্লেট ... এটি কখনই ভাবেননি! অ্যামেজিং!

— রোমান লোপেজ

2

বাহ, এটা সত্যিই খুব সুন্দর। আমি প্রতিটি টেম্পলেটটিতে ডেটা-url বৈশিষ্ট্য যুক্ত করছি। এবং প্রত্যেকের জন্য এজাক্স ডেটা আনা হচ্ছে। এটি এত সুন্দর এবং আমাকে এত সময় বাঁচিয়েছে! ধন্যবাদ.

— ডেভি

42

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

যেহেতু গৃহীত উত্তরটি ওভারলোডিং স্ক্রিপ্ট পদ্ধতির প্রতিনিধিত্ব করবে, তাই আমি অন্য একটি পরামর্শ দিতে চাই যা আমার মতে, এক্সএসএস ঝুঁকির কারণে অনেক ক্লিনার এবং আরও সুরক্ষিত যা ওভারলোডিং স্ক্রিপ্টগুলির সাথে আসে।

কীভাবে এটি কোনও ক্রিয়ায় এটি ব্যবহার করতে হয় এবং কীভাবে একটি টেম্পলেটটিকে অন্য ইনজেক্টে ইনজেক্ট করতে হয়, সম্পাদনা করতে হবে এবং তারপরে ডকুমেন্ট ডিওমে যুক্ত করতে একটি ডেমো তৈরি করেছি ।

উদাহরণ এইচটিএমএল

<template id="mytemplate">
  <style>
     .image{
        width: 100%;
        height: auto;
     }
  </style>
  <a href="#" class="list-group-item">
    <div class="image">
      <img src="" />
    </div>
    <p class="list-group-item-text"></p>
  </a>
</template>

উদাহরণস্বরূপ জেএস

// select
var t = document.querySelector('#mytemplate');

// set
t.content.querySelector('img').src = 'demo.png';
t.content.querySelector('p').textContent= 'demo text';

// add to document DOM
var clone = document.importNode(t.content, true); // where true means deep copy
document.body.appendChild(clone);

এইচটিএমএল <template>

+ এটির সামগ্রীটি সক্রিয় না হওয়া পর্যন্ত কার্যকরভাবে জড় হয়। মূলত, আপনার মার্কআপটি লুকানো ডিওএম এবং রেন্ডার করে না।
+ টেমপ্লেটের মধ্যে থাকা কোনও সামগ্রীর পার্শ্ব প্রতিক্রিয়া থাকবে না। স্ক্রিপ্টগুলি সঞ্চালিত হয় না, চিত্রগুলি লোড হয় না, অডিও বাজায় না ... যতক্ষণ না টেমপ্লেট ব্যবহৃত হয়।
+ বিষয়বস্তু নথিতে নয় বলে বিবেচিত হয়। প্রধান পৃষ্ঠা ব্যবহার document.getElementById()বা ব্যবহার করা querySelector()কোনও টেমপ্লেটের চাইল্ড নোডগুলি ফিরিয়ে দেবে না।
+ টেম্পলেটসমূহ যে কোন জায়গায় ভেতরে স্থাপন করা যেতে পারে <head>, <body>অথবা <frameset>এবং কন্টেন্ট যা তাদের উপাদানের মধ্যে অনুমোদিত হয় কোন প্রকার থাকতে পারে। নোট করুন যে "কোথাও" এর অর্থ <template>এইচটিএমএল পার্সার অনুমতি না দেওয়া জায়গায় নিরাপদে ব্যবহার করা যেতে পারে।

পিছু হট

ব্রাউজার সমর্থন কোনও সমস্যা হওয়া উচিত নয় তবে আপনি যদি সমস্ত সম্ভাবনা কভার করতে চান তবে আপনি একটি সহজ চেক করতে পারেন:

বৈশিষ্ট্য সনাক্ত করতে <template>, ডিওএম উপাদান তৈরি করুন এবং পরীক্ষা করুন সম্পত্তি হিসাবে উপস্থিত রয়েছে:

function supportsTemplate() {
  return 'content' in document.createElement('template');
}

if (supportsTemplate()) {
  // Good to go!
} else {
  // Use old templating techniques or libraries.
}

ওভারলোডিং স্ক্রিপ্ট পদ্ধতি সম্পর্কে কিছু অন্তর্দৃষ্টি

+ কিছুই রেন্ডার হয় না - ব্রাউজারটি এই ব্লকটি রেন্ডার করে না কারণ <script>ট্যাগ রয়েছেdisplay:none ডিফল্টরূপে থাকে।
+ জড় - ব্রাউজারটি স্ক্রিপ্টের সামগ্রীটি জেএস হিসাবে বিশ্লেষণ করে না কারণ এর ধরণটি অন্য কিছু থেকে সেট করা আছে "text/javascript" ।
-সিকিউরিটি ইস্যু - এর ব্যবহারকে উত্সাহ দেয় .innerHTML। ব্যবহারকারী-সরবরাহিত ডেটা রান-টাইম স্ট্রিং পার্সিং সহজেই এক্সএসএস দুর্বলতার দিকে নিয়ে যেতে পারে।

সম্পূর্ণ নিবন্ধ: https://www.html5rocks.com/en/tutorials/webcomponents/template/#toc-old

দরকারী রেফারেন্স: https://developer.mozilla.org/en-US/docs/Web/API/Docament/importNode http://caniuse.com/#feat=queryselector

Web উপাদান তৈরি কাস্টম ওয়েব উপাদান এইচটিএমএল টেমপ্লেট ব্যবহার করে টিউটোরিয়ালটি Trawersy মিডিয়া দ্বারা তৈরি করা হচ্ছে: https://youtu.be/PCWaFLy3VUo

— DevWL
সূত্র

4

templateউপাদান ইন্টারনেট এক্সপ্লোরার (2018 থেকে, IE11) দ্বারা সমর্থিত নয়। W3c.github.io/html/single-page.html এর 580 উদাহরণ দিয়ে পরীক্ষিত ।

— রোল্যান্ড

আমি পছন্দ করি <template>, যদিও আমি ক্লাসগুলি উদারভাবে ব্যবহারের পরামর্শ দিই, তাই এটি কী স্পষ্ট হবে তা কি স্পষ্ট হয় প্রপসগুলি কীসের সাথে সেট করা হচ্ছে। আপনার ডেটাটি সঠিকভাবে টেমপ্লেটে ম্যাপ করতে কিছু জেএস দক্ষতা গ্রহণ করে, বিশেষত বড় আকারের ডেটা ম্যাপিংয়ের জন্য উপাদান-শৈলীর পদ্ধতির ব্যবহার করে। ব্যক্তিগতভাবে আমি এখনও কেবল ফাংশনগুলিতে এইচটিএমএল তৈরি করা পছন্দ করি বা আদর্শভাবে সরাসরি জেএসের সাথে ডিওএম তৈরি করি এবং এইচটিএমএলকে পুরোপুরি রেখে যাই (যেমন কীভাবে এটি প্রতিক্রিয়া দেখায়)।

— জোশি কেরিবাউ

টেমপ্লেট পদ্ধতির আমার জন্য ভাল কাজ করেছে। আমার কাছে একটি সুপারিশটি হ'ল প্রথমে টেমপ্লেটটি ক্লোন করা (শেষের পরিবর্তে) এবং ক্লোনযুক্ত বস্তুর সাথে কাজ করা। অন্যথায়, আপনি যে পরিবর্তনগুলি করছেন তা টেমপ্লেটে নিজেই ঘটছে। যদি আপনি শর্তযুক্ত যুক্তিযুক্ত হন যেখানে আপনি কিছু সম্পত্তি / সামগ্রী কেবলমাত্র কিছু সময় সেট করেন তবে সেই বৈশিষ্ট্যগুলি আপনার পরবর্তী টেমপ্লেটের ব্যবহারে উপস্থিত থাকবে। প্রতিটি ব্যবহারের আগে ক্লোন করে, আপনি নিশ্চিত হন যে আপনার কাছে সর্বদা কাজ করার জন্য একটি নিয়মিত বেস রয়েছে।

— জেটি

13

শরীরের কোথাও যুক্ত করুন

<div class="hide">
<a href="#" class="list-group-item">
    <table>
        <tr>
            <td><img src=""></td>
            <td><p class="list-group-item-text"></p></td>
        </tr>
    </table>
</a>
</div>

তারপরে CSS তৈরি করুন

.hide { display: none; }

এবং আপনার জেএস যোগ করুন

$('#output').append( $('.hide').html() );

— মাতেউজ নওক
সূত্র

1

ওপির একটি জেএসওএন রয়েছে এবং ডেটা উত্স হিসাবে সেই অ্যারেটি ব্যবহার করে কিছু এইচটিএমএল রেন্ডার করতে চায়। এই উত্তরটি কীভাবে সমস্যার সমাধান করছে? আপনার উত্তরটি এইচটিএমএল নোড নেয় এবং এটি ক্লোন করে / ডুপ্লিকেট করে এবং ডেটা বাইন্ডিং সম্পর্কিত কোনও কিছুই।

— অ্যাড্রিয়ান ইফটোড

সুতরাং আমি হতাশ যারা হয়।

— অ্যাড্রিয়ান ইফটোড

আমি সত্যিই মনে করি আপনি আরও ভাল উত্তর পেতে সাহায্য করছেন না, আপনি আমাদের স্মরণ করিয়ে দিয়ে শুরু করতে পারতেন যে বিষয়টি আমাদের উত্তরগুলির দ্বারা সুস্পষ্ট that

— সেবাস্তিয়ান নীরা

1

এটি কাজ করে, তবে এটি .children().clone()করার চেয়ে এটি আরও দক্ষ .html()। <tr/>এই কোডটি ব্যবহার করে আমার একটি পৃষ্ঠায় র্যান্ডম করার জন্য গতিটি প্রায় 3: 1

i=10000; time=performance.now(); while (--i) {$a.clone().append(0 ? $b.html() : $b.children().clone())} performance.now()-time

। অনুপাতটি আসলে খানিকটা অতিরঞ্জিত কারণ আমি $ a.clone () ব্যবহার করছি তবে প্রতিটি পুনরাবৃত্তি খালি করার চেষ্টা করা ক্লোনিংয়ের চেয়ে একটি পারফরম্যান্সের চেয়ে বেশি, সুতরাং কীভাবে এটিকে আরও নির্ভুল করা যায় তা আমি নিশ্চিত নই কারণ টাইমিং ফাংশনগুলির নিজস্ব ব্যয় থাকে।

— চিনোটো ভোকরো

1

এই অ্যাপ্রোচ খারাপ। মূলত আপনি টেমপ্লেট সামগ্রী পান এবং এটি ব্যবহার না করে পার্স করার পরেও। একে বৈধ উত্তর হিসাবে বিবেচনা করা এটি খুব বড় বিষয়। উপরের অন্য কেউ হিসাবে, যদি আপনাকে অন্তত .html () এর পরিবর্তে ক্লোন ব্যবহার করতে হয়

— DevWL

3

অন্যান্য বিকল্প: খাঁটি

আমি এটি ব্যবহার করি এবং এটি আমাকে অনেক সাহায্য করেছে। তাদের ওয়েবসাইটে প্রদর্শিত একটি উদাহরণ:

এইচটিএমএল

<div class="who">
</div>

তাদেরকে JSON

{
  "who": "Hello Wrrrld"
}

ফলাফল

<div class="who">
  Hello Wrrrld
</div>

— alditis
সূত্র

2

এই সমস্যাটি সমাধান করার জন্য, আমি দুটি সমাধান স্বীকার করি:

প্রথমটি এজেএক্সের সাথে যায়, যার সাহায্যে আপনাকে অন্য ফাইল থেকে টেমপ্লেট লোড করতে হবে এবং আপনি যখনই চান প্রতিটি সময় যুক্ত করতে হবে .clone()।
```
$.get('url/to/template', function(data) {
    temp = data
    $('.search').keyup(function() {
        $('.list-items').html(null);

        $.each(items, function(index) {
             $(this).append(temp.clone())
        });

    });
});
```
অ্যাকাউন্টটি বিবেচনায় আনুন যে ডেটা উপলভ্য হয়েছে তা নিশ্চিত হওয়ার জন্য এজ্যাক্সটি একবার যুক্ত করা উচিত!
দ্বিতীয়টি হ'ল এটি সরাসরি এইচটিএমএল এ যে কোনও জায়গায় যুক্ত করা, এটি নির্বাচন করুন এবং এটি jQuery এ লুকিয়ে রাখুন:
```
temp = $('.list_group_item').hide()
```
আপনি এর সাথে টেমপ্লেটের একটি নতুন উদাহরণ যুক্ত করতে পারেন
```
$('.search').keyup(function() {
    $('.list-items').html(null);

    $.each(items, function(index) {
        $(this).append(temp.clone())
    });
});
```
পূর্ববর্তীটির মতো একই, তবে আপনি যদি না চান টেমপ্লেটটি সেখানেই থাকে তবে কেবল জাভাস্ক্রিপ্টে, আমি মনে করি আপনি .detach()আড়াল না করে ব্যবহার করতে পারেন (এটি পরীক্ষা করেছেন না!) ।
```
temp = $('.list_group_item').detach()
```
.detach() ডেটা এবং ইভেন্টগুলি বাঁচিয়ে রাখার সময় DOM থেকে উপাদানগুলি সরিয়ে দেয় (.মেরাও () না!)।

— সেবাস্তিয়ান নীরা
সূত্র

-- কোন সমস্যা নেই! -

— iConnor

অপটির একটি জেএসওএন রয়েছে এবং ডেটা উত্স হিসাবে সেই অ্যারেটি ব্যবহার করে কিছু এইচটিএমএল রেন্ডার করতে চায়। এই উত্তরটি কীভাবে সমস্যার সমাধান করছে? আপনার উত্তরটি এইচটিএমএল নোড নেয় এবং এটি ক্লোন করে / ডুপ্লিকেট করে এবং ডেটা বাইন্ডিং সম্পর্কিত কোনও কিছুই।

— অ্যাড্রিয়ান ইফটোড

1

আমি বিকল্প থেকে উদ্ধৃতি দিচ্ছি: নীচের HTML কোডের একটি অনুলিপি কিছু মান সহ একটি ধারক উপাদানকে যুক্ত করতে চাই to আমি বিশ্বাস করি এটি তার সমস্যার সমাধান করে।

— সেবাস্তিয়ান নীরা

এবং "কিছু মান" অংশটি কীভাবে আচরণ করা হয়?

— অ্যাড্রিয়ান ইফটোড

ঠিক আছে, এর অর্থ এই নয় যে এটি সমস্যার সমাধান করে না। আমি প্রশংসা করি যে আপনি আমাকে বলেছিলেন যে আমি একটি পয়েন্ট হারিয়েছি :) যাইহোক, আমি কীভাবে এই মানগুলি সন্নিবেশ করব তা আমি কীভাবে জানব যদি আমরা কী মানগুলি নিয়ে কথা বলি তবে? এই অংশটি একবার দেখুন, আমি স্মার্ট উপায়ে পুনরায় ব্যবহার করতে এই এইচটিএমএলটি কোথায় রাখতে পারি? । আসলেই কী জিজ্ঞাসা করা হচ্ছে? JSON বা এইচটিএমএল অন্তর্ভুক্তি সম্পর্কে?

— সেবাস্তিয়ান নীরা

1

নেটিভ এইচটিএমএল 5 টেমপ্লেট উপাদানটি ব্যবহার করার বিষয়ে ডেডাব্লুএল থেকে খুব ভাল উত্তর । ওপি থেকে এই ভাল প্রশ্নের অবদানের জন্য আমি jQuery ব্যবহার করে কীভাবে এই উপাদানটি ব্যবহার করতে হবে তা যুক্ত করতে চাই example template

$($('template').html()).insertAfter( $('#somewhere_else') );

এর বিষয়বস্তু templateএইচটিএমএল নয়, কেবলমাত্র ডেটা হিসাবে বিবেচিত, সুতরাং jQuery এর পদ্ধতিগুলি অ্যাক্সেস করার জন্য আপনাকে সামগ্রীটি একটি jQuery অবজেক্টে মোড়ানো প্রয়োজন।

— জ্যাক
সূত্র

JQuery ব্যবহার করে সংযুক্ত করার জন্য একটি HTML টেমপ্লেট সংজ্ঞায়িত করা হচ্ছে

এইচটিএমএলের অভ্যন্তরে টেম্পলেটগুলি

জেএস ভিতরে টেমপ্লেট

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

উদাহরণ এইচটিএমএল

উদাহরণস্বরূপ জেএস

এইচটিএমএল <template>

পিছু হট

ওভারলোডিং স্ক্রিপ্ট পদ্ধতি সম্পর্কে কিছু অন্তর্দৃষ্টি