A simple clientside templating langauge

Paul Kinlan
Available in: English (Original) Deutsch Español Français 日本語

एक हालिया परियोजना में, मैं कुछ जेएसओएन डेटा को किसी भी पुस्तकालयों को आयात किए बिना एक डोम तत्व में बांधने का एक आसान तरीका चाहता था और मुझे लगता है कि मैं एक सुंदर साफ समाधान के साथ आया हूं (मेरी आंखों में ) जो परियोजना के लिए मेरी सभी जरूरतों को पूरा करता है।

समाधान ‘डेटा-बाइंड- *’ नामक डीओएम डेटा विशेषताओं के अंदर टेम्पलेटिंग निर्देशों को एन्कोड करता है, जो डेटासेट संपत्ति में डीओएम तत्व पर पहुंच योग्य होते हैं और यह ऊंट-केस के साथ स्वचालित रूप से होता है (यानी, ‘आंतरिक टेक्स्ट’ सेट करने के लिए एक विशेषता ‘डेटा-बाइंड_इनर-टेक्स्ट’ होगी - हाइफ़न नोट करें)।

परियोजना से नमूना टेम्पलेट यहां दिया गया है:

<template id="itemTemplate">
  <div class="item new" data-bind_id="guid" id="">
    <h3><span data-bind_inner-text="title"></span></h3>
    <p class="description" data-bind_inner-text="content:encoded|description"></p>
    <div>
      <a data-bind_href="link" data-bind_inner-text="pubDate" data-bind_title="title" href="" title=""></a>
      <svg class="share" url="" title="" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
        <path fill="none" d="M0 0h24v24H0z"></path><path d="M18 16c-.8 0-1.4.4-2 .8l-7-4v-1.5l7-4c.5.4 1.2.7 2 .7 1.7 0 3-1.3 3-3s-1.3-3-3-3-3 1.3-3 3v.7l-7 4C7.5 9.4 6.8 9 6 9c-1.7 0-3 1.3-3 3s1.3 3 3 3c.8 0 1.5-.3 2-.8l7.2 4.2v.6c0 1.6 1.2 3 2.8 3 1.6 0 3-1.4 3-3s-1.4-3-3-3z"></path>
      </svg>
    </div>
  </div>
</template>

जैसा कि आप देख सकते हैं, हम 'का उपयोग करते हैं