JQuery জন্য প্রস্তাবিত জাভাস্ক্রিপ্ট এইচটিএমএল টেমপ্লেট লাইব্রেরি? [বন্ধ]


89

কোন এইচটিএমএল টেমপ্লেট লাইব্রেরির উপর কোনও পরামর্শ JQuery এর সাথে ভাল যাবে? গুগলিং বেশ কয়েকটি লাইব্রেরি চালু করেছে তবে আমি নিশ্চিত নই যে কোনও ভাল স্বীকৃত লাইব্রেরি রয়েছে যা সময়ের পরীক্ষায় দাঁড়াবে।


21
বলুন আপনি 100 টি রেকর্ড সহ কোনও জসন বস্তু ফিরিয়ে আনবেন। প্রতিটি রেকর্ডের একই html টুকরা উত্পাদন করা প্রয়োজন। এটি জেএসে মার্কআপ তৈরির চেয়ে একটি টেম্পলেট ব্যবহার করতে সহায়তা করে। কোনও ডিজাইনারকে
জেএস

4
@ ক্লেটাস - কারণ অ্যাপেন্ডের শৃঙ্খলার চেয়ে এইচটিএমএল ফর্ম্যাটযুক্ত টেম্পলেটটি ব্যবহার করা সহজ
অ্যান্ড্রে

4
আপনার পছন্দের সাহায্যে এই পারফেক্ট
এএম

উত্তর:


58

ঠিক আছে, সত্যি বলতে, ক্লায়েন্ট সাইড টেম্প্লেটিং আজকাল খুব গরম তবে বেশ জঙ্গল।

সবচেয়ে জনপ্রিয় হ'ল, আমি বিশ্বাস করি:

  • খাঁটি : এটি কেবল জেএস ব্যবহার করে, তার নিজস্ব "সিনট্যাক্স" নয়
  • গোঁফ : শুনেছি বেশ স্থিতিশীল এবং সুন্দর।
  • jqote2 : jsperfs অনুযায়ী অত্যন্ত দ্রুত
  • jquery টেমপ্লেট (হ্রাস করা):

এখানে প্রচুর পরিমাণে রয়েছে, তবে আপনাকে কী উপযুক্ত এবং আপনার প্রকল্পের স্টাইলটি সর্বোত্তম see

ব্যক্তিগতভাবে, আমি একটি নতুন সিনট্যাক্স এবং যুক্তির সেট ( যুক্তি এবং টেমপ্লেট মিশ্রন, হ্যালো ?? ) যুক্ত করার সাথে কঠোর সময় কাটিয়েছি, এবং খাঁটি জেএসে গিয়েছি। আমার প্রতিটি টেমপ্লেট এর নিজস্ব এইচটিএমএল ফাইল (./usersTable.row.html) এ সঞ্চিত আছে। আমি কেবল টেমপ্লেটগুলি ব্যবহার করি যখন সামগ্রীটি অজ্যাক্স করা হয় এবং আমার কাছে কয়েকটি "লজিক" জেএস ফাইল রয়েছে, একটি টেবিলের জন্য একটি, ডিভের জন্য একটি, তালিকার জন্য একটি। এমনকি নির্বাচনের বিকল্পগুলির জন্য একটিও নয় (যেখানে আমি অন্য পদ্ধতি ব্যবহার করি)।

প্রতিবার যখন আমি আরও জটিল কিছু করার চেষ্টা করেছি, তখন আমি জানতে পেরেছিলাম কোডটি কম পরিষ্কার ছিল এবং "পুরানো" উপায়ে করার চেয়ে স্থিতিশীল হতে আমাকে আরও বেশি সময় নিচ্ছে। টেমপ্লেটে লজিক আমার মতে একটি সম্পূর্ণ অজ্ঞান, এবং এটির নিজস্ব বাক্য সংযোজন যুক্ত করা কেবলমাত্র খুব হার্ড-টু-ট্রেস বাগগুলি যুক্ত করে।


14

jTemplate

জাভাস্ক্রিপ্ট জন্য একটি টেমপ্লেট ইঞ্জিন।

JQuery এ প্লাগইন ...

বৈশিষ্ট্য:

  • জাভাস্ক্রিপ্টে 100%
  • precompilator
  • সমর্থন JSON
  • অ্যাজাক্স নিয়ে কাজ করুন
  • টেমপ্লেটের অভ্যন্তরে জাভাস্ক্রিপ্ট কোড ব্যবহার করার অনুমতি দিন
  • ক্যাসকেডিং টেম্পলেটগুলি তৈরি করার অনুমতি দিন
  • টেমপ্লেটগুলিতে পরামিতিগুলি সংজ্ঞায়িত করার অনুমতি দিন
  • রিফ্রেশ - সার্ভার থেকে স্বয়ংক্রিয় আপডেট সামগ্রী ...

8

এই বিষয়ে একটি যুক্তিসঙ্গত আলোচনা নথি এখানে , যা টেমপ্লেট সরঞ্জামের একটি পরিসীমা জুড়ে। যদিও jQuery এর সাথে নির্দিষ্ট নয়।


5

jQuery টেমপ্লেটস প্লাগইন মাইক্রোসফ্ট দ্বারা নির্মিত এবং একটি অফিসিয়াল jQuery প্লাগইন হিসাবে গৃহীত।

তবে নোট করুন যে এটি এখন হ্রাস পেয়েছে।


13
এবং তখন থেকে "অবহেলা"। বিকাশ বন্ধ রয়েছে, এবং এটি বিটার বাইরে যাবে না। একটি এমএস লোক, এবং জ্যাকিউরি-ইউআই টিএম জেএসেন্ডার উপর ভিত্তি করে একটি নতুন টেম্পলেট নিয়ে কাজ করছে;)
রোজালান

হু, বামার - আমি এটি আমার ওয়েব অ্যাপ্লিকেশনটিতে ব্যবহার করছি :( যদিও টিপটির জন্য ধন্যবাদ! আপনি যে আগত টেম্প্লেটিং ইঞ্জিনটি উল্লেখ করেছেন তাতে কোনও লিঙ্ক আছে?
অ্যান্ড্রে

4
যদি সবকিছু ঠিকঠাক হয়, jsreender বাই বোরিস মুর এটি jquery-ui এ পাবে। আমার অনুমানের তাড়াহুড়ো করার দরকার নেই;)
রোজালান

4
আমি একটি প্রকল্পে jsRender প্রয়োগ করেছি এবং এটি কেবল আশ্চর্যজনক। ভাল করে দেখুন।
এ্যাসেল

4

আমি json2html চেক করব , এটি এইচটিএমএল স্নিপেটগুলি লিখতে ভুলে যায় এবং এর পরিবর্তে জেএসএন রূপান্তর করে জেএসওএন অবজেক্ট অ্যারে এর কাঠামোগত তালিকায় রূপান্তর করতে। খুব দ্রুত এবং ডোম তৈরির ব্যবহার করে।


4
অস্বীকৃতি .. আমি এটি লিখেছি। তবে চেক আউট মূল্য;)
চাদ ব্রাউন

3

কয়েক বছর আগে আমি আইবিডম তৈরি করেছি: http://ibdom.sf.net/ | ডিসেম্বর ২০০৯ হিসাবে, আপনি যদি ট্রাঙ্ক থেকে সরাসরি পান তবে এটি jQuery বাইন্ডিং সমর্থন করে।

$("#foo").injectWith(collectionOfJavaScriptObjects);

বা

$("#foo").injectWith(simpleJavaScriptObject);

এছাড়াও, আপনি এখন সমস্ত "ডেটা: প্রোপনাম" চিহ্নিতকারীগুলিকে শ্রেণি = "ডেটা: প্রোপনাম অন্যান্য শ্রেণিকাম" বৈশিষ্ট্যগুলিতে রাখতে পারেন, সুতরাং আপনাকে সেই চিহ্নকারীদের সাথে আপনার অ্যাপ্লিকেশনটির সামগ্রী লিটারে ফেলতে হবে না।

আমার সাম্প্রতিক বর্ধনগুলি প্রতিফলিত করতে আমি সেখানে ডকুমেন্টেশনের একগুচ্ছ আপডেট করেছি, তবে 2007 সাল থেকে আমার এই কাঠামোর বিভিন্ন সংস্করণ ছিল।

এই প্রশ্নের সংশয়ীদের কাছে:

মাইক্রোসফ্ট যখন আইএম 5 আবিষ্কার করেছিল আমরা এখন এক্সএমএলএইচটিপিআরকেস্ট এবং "এজ্যাক্স" প্যাটার্ন হিসাবে যা জানি, এর পেছনের প্রতিশ্রুতির অংশটি ছিল একটি ওয়েব ব্রাউজার এবং সার্ভারের মধ্যে ডেটা বিনিময় করা exchange এই ডেটাটি এক্সএমএলে এনপ্যাপুলেটেড হওয়ার কথা, কারণ ১৯৯৯/২০০০ এ এক্সএমএল কেবল খুব গরম ছিল। কল-ব্যাক মেকানিজম দ্বারা নেটওয়ার্কের উপর একটি এক্সএমএল ডকুমেন্ট পুনরুদ্ধার করা ছাড়াও, এমএসের এমএসএক্সএমএল অ্যাক্টিভএক্স উপাদানটি এখন আমরা এক্সএসএল-টি এবং এক্সপথ হিসাবে যা জানি তার প্রাক-খসড়া বাস্তবায়নকে সমর্থন করে।

এইচটিটিপি / এক্সএমএল, এক্সপথ, এবং এক্সএসএল-টি পুনরুদ্ধার সংমিশ্রণ, বিকাশকারীদের "অ্যাপ্লিকেশন" হিসাবে খাঁটি প্রেরণ, বিশুদ্ধরূপে প্রেরণ, এবং আরও গুরুত্বপূর্ণভাবে সার্ভার থেকে ডেটা পুনরুদ্ধার করার জন্য সমৃদ্ধ "নথি" তৈরি করার অভাবনীয় সৃজনশীলতা সরবরাহ করেছে।

কেন এটি একটি দরকারী নিদর্শন? এটি আপনার ব্যবহারকারী ইন্টারফেসটি কতটা জটিল এবং এর রক্ষণাবেক্ষণের বিষয়ে আপনি কতটা যত্নশীল তা নির্ভর করে depends

উন্নত সিএসএসের সাথে দর্শনীয়ভাবে খুব সমৃদ্ধ শব্দার্থবিজ্ঞানযুক্ত চিহ্নিত ইন্টারফেস তৈরি করার সময়, আপনি শেষ কাজটি করতে চান তা হ'ল "মিনি-কন্ট্রোলার / ভিউজ" এ মার্কআপের টুকরো টুকরো টুকরো করে ফেলুন, সুতরাং আপনি HTML এ মূল HTML এ কোনও ডকুমেন্টের টুকরো টুকরো করতে পারেন নথি, এবং কেন এখানে।

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

ধারণাটি ছিল যে আপনার সমস্ত মার্কআপ ইউআই রচনাগুলি একটি একক নথিতে রয়েছে, নেটওয়ার্কের মাধ্যমে কেবলমাত্র ডেটা পুনরুদ্ধার করুন এবং একটি শক্ত কাঠামো ব্যবহার করুন যা আপনার মার্কআপ কনস্ট্রাক্টসগুলিতে খুব সহজেই আপনার ডেটা ইনজেক্ট করবে এবং সর্বাধিক প্রতিলিপিযুক্ত মার্কআপ কনস্ট্রাক্টস যা আপনি পুনরাবৃত্ত হিসাবে পতাকাঙ্কিত করেছেন।

আই এস 5-তে এক্সএসএল-টি এবং এক্সপাথের মাধ্যমে এটি সম্ভব ছিল, তবে কার্যত অন্য কোনও ব্রাউজার নেই। কিছু এফ / ওএসএস ব্রাউজার ফ্রেমওয়ার্কগুলি এক্সপাথের সাথে ছড়িয়ে পড়েছে তবে এটি এখনও ঠিক নির্ভর করা যায় এমন কিছু নয়।

সুতরাং এই জাতীয় প্যাটার্ন অর্জনের পরবর্তী সেরা জিনিসটি কী? আইবিডম। আপনার সার্ভার থেকে ডেটা পান, এটি আপনার নথিতে ইনজেক্ট করুন। অনায়াসে


আরও একটি জিনিস: আইবিডম 100% খাঁটি ডিওএম পদ্ধতি এবং শূন্য অভ্যন্তরীণ এইচটিএমএল ব্যবহার করে।
ক্রিস হল্যান্ড

অন্য দ্রষ্টব্য: আইবিডোম আমি "ফোরকডলুপ এক্সেকশন" বলে যা প্রয়োগ করে যা অভ্যন্তরীণভাবে ব্যবহৃত উপাদান এবং সেইসাথে এটি নিজেরাই ব্যবহারযোগ্য something এখানে সমস্যাটি ছিল: ধরা যাক আপনি কিছুটা লুপিং কনস্ট্রাক্টের মাধ্যমে ক্রিয়েটমেন্ট এবং অ্যাপেন্ডচিল্ডের মাধ্যমে ডিওএম সংশোধন করছেন যা বেশ কয়েকটি বড় ডেটা অবজেক্টের বেশ বড় অ্যারে যেতে হবে: বেশিরভাগ ব্রাউজারগুলি ব্যবহারকারী ইন্টারফেসটিকে "পুনরায় রঙ করা" করবে না, যতক্ষণ না DOM- প্রভাবিত কোড "রিটার্ন"। প্রচুর ডেটা সহ একটি বৃহত "লুপের জন্য", আমাদের অনুসন্ধানের ফলাফলগুলি পুরো অংশটি এক অংশে প্রদর্শন করার আগে কয়েক সেকেন্ডের থেকে আধা সেকেন্ডে লক্ষণীয় হয়ে যেতে পারে।
ক্রিস হল্যান্ড

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

2

আপনার জাভাস্ক্রিপ্ট-টেমপ্লেটগুলির উপর নজর দেওয়া উচিত, এটি বিখ্যাত jQuery ফাইল আপলোড প্লাগইনের মধ্যে ব্যবহৃত একটি ছোট টেম্পলেট ইঞ্জিন এবং একই লেখক সেবাস্তিয়ান স্ক্যাশন (@ ব্লুয়িম্প) দ্বারা বিকাশিত

https://github.com/blueimp/JavaScript- টিম্পলেটস

সেবাস্তিয়ান দ্বারা নির্মিত ব্যবহার গাইড অনুসরণ করুন , কেবল এই লাইনটি সরিয়ে দিন

document.getElementById("result").innerHTML = tmpl("tmpl-demo", data);

এটির সাথে এটি প্রতিস্থাপন করুন

$('#result').html(tmpl('tmpl-demo', data));

আপনার এইচটিএমএল ফাইলটিতেও ডিভ রেজাল্ট ট্যাগ যুক্ত করতে ভুলবেন না

<div id="result"></div>

উপভোগ করুন

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.