इस लेख में मैं पुस्तकालय के बारे में थोड़ा बताना चाहूंगा, जिसका पहला संस्करण मैंने पिछले साल के अंत में बनाया था। यह बिंदु बहुत सरल है - HTML भाषा की क्षमताओं का विस्तार करने के लिए ताकि आप जावास्क्रिप्ट के बिना सरल और नियमित चीजें लिख सकें: फॉर्म को json प्रारूप में सबमिट करना, HTML टेम्पलेट फ़ाइलों को एक विशिष्ट पृष्ठ पर लोड करना (अनिवार्य रूप से HTML के लिए एक मॉड्यूलर प्रणाली http / s अनुरोधों के माध्यम से), टर्बाइन ( हाय RoR उपयोगकर्ताओं के लिए), ajax अनुरोधों की प्रतिक्रियाओं और थोड़ा और अधिक के आधार पर एक सरल टेम्पलेट।

लाइब्रेरी को EHTML या विस्तारित HTML कहा जाता है । यह वेब घटकों के कुख्यात विचार पर आधारित है । यह जीथब पर उपलब्ध है , उदाहरणों के साथ बहुत अच्छी तरह से संरचित प्रलेखन है। इस लेख में मैं केवल मुख्य विचारों का वर्णन करूंगा, शायद यह किसी के पास जाएगा।

लाइब्रेरी कनेक्शन

शुरू करने के लिए, इसका उपयोग करने के लिए, आपको प्रोजेक्ट बनाने के लिए या तो npm या cli टूल की आवश्यकता नहीं है, सभी आवश्यक है कि HTML पृष्ठ जहां आप लाइब्रेरी स्क्रिप्ट शामिल करें :

<head>
  <script src="/../js/ehtml.bundle.min.js" type="text/javascript"></script>
</head>

वैकल्पिक प्रणाली

आइए एक सरल से शुरू करें - कई अन्य लोगों से एक HTML पृष्ठ संकलित करें:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  <head>
    <script src="/../js/ehtml.bundle.min.js" type="text/javascript"></script>
  </head>

  <body class="main">
    <div class="articles">
      <e-html data-src="/../html/first.html"></e-html>
      <e-html data-src="/../html/second.html"></e-html>
      <e-html data-src="/../html/third.html"></e-html>
    </div>
  </body>
</html>

ऐसा करने के लिए, हम एक कस्टम तत्व का उपयोग e-htmlकरते हैं जिसमें एक एकल विशेषता होती है data-src, जहां हम इंगित करते हैं कि पृष्ठ का HTML भाग कहाँ वितरित किया गया है। अगर, उदाहरण के लिए, first.htmlयह कुछ इस तरह दिखता है:

<div class="article">
  <!-- some content of the first article -->
</div>

फिर अंत में हमारे पेज को निम्न प्रकार से प्रस्तुत किया जाएगा:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  <head>
    <script src="/../js/ehtml.bundle.min.js" type="text/javascript"></script>
  </head>

  <body class="main">
    <div class="articles">
      <div class="article">
        <!-- content of the first article -->
      </div>
      <div class="article">
        <!-- content of the second article -->
      </div>
      <div class="article">
        <!-- content of the third article -->
      </div>
    </div>
  </body>
</html>

यही है, टैग e-htmlको उस HTML फ़ाइल से सामग्री द्वारा प्रतिस्थापित किया जाएगा जिसे हमने data-srcविशेषता में निर्दिष्ट किया है ।

<template/>. . e-wrapper, . <template/> is="e-wrapper" - . :

<!-- /../html/wrapper.html -->
<div class="base">
  <p>
    Header content
  </p>
  <p id="dynamic-content">
    <span>Default content</span>
  </p>
  <p>
    Footer content
  </p>
</div>

, :

<body class="main">
  <template 
    is="e-wrapper" 
    data-src="/../html/wrapper.html" 
    data-where-to-place="#dynamic-content" 
    data-how-to-place="instead">
    <p>
      Variation of content
    </p>
  </template>
</body>

, :

<div class="base">
  <p>
    Header content
  </p>
  <p>
    Variation of content
  </p>
  <p>
    Footer content
  </p>
</div>

data-src HTML , . data-where-to-place , e-wrapper . data-how-to-place . : instead( , data-where-to-place), before( ) after ( ). , e-html e-wrapper html . http , , — .

ajax

, json :

/../album/{title}
title = 'Humbug'
{
  "title": "Humbug",
  "artist": "Arctic Monkeys",
  "type": "studio album",
  "releaseDate": "19 August 2009",
  "genre": "psychedelic rock, hard rock, stoner rock, desert rock",
  "length": "39:20",
  "label": "Domino",
  "producer": "James Ford, Joshua Homme"
}

is="e-json", HTML:

<template is="e-json" data-src="/../album/Humbug" data-object-name="albumResponse">
  <div data-text="Title: ${albumResponse.body.title}"></div>
  <div data-text="Artist: ${albumResponse.body.artist}"></div>
  <div data-text="Type: ${albumResponse.body.type}"></div>
  <div data-text="Release date: ${albumResponse.body.releaseDate}"></div>
  <div data-text="Genre: ${albumResponse.body.genre}"></div>
  <div data-text="Length: ${albumResponse.body.length}"></div>
  <div data-text="Label: ${albumResponse.body.label}"></div>
  <div data-text="Producer: ${albumResponse.body.producer}"></div>
</template>

data-src , json , data-object-name — , http : body, headers statusCode. data-text , e-json .

. , :

title = 'Humbug'
{
  "title": "Humbug",
  "artist": "Arctic Monkeys",
  "songs": [
    { "title": "My Propeller", "length": "3:27" },
    { "title": "Crying Lightning", "length": "3:43" },
    { "title": "Dangerous Animals", "length": "3:30" },
    { "title": "Secret Door", "length": "3:43" },
    { "title": "Potion Approaching", "length": "3:32" },
    { "title": "Fire and the Thud", "length": "3:57" },
    { "title": "Cornerstone", "length": "3:18" },
    { "title": "Dance Little Liar", "length": "4:43" },
    { "title": "Pretty Visitors", "length": "3:40" },
    { "title": "The Jeweller's Hands", "length": "5:42" }
  ]
}

e-for-each :

<template is="e-json" data-src="/../album/Humbug" data-object-name="albumResponse">
    <div data-text="Title: ${albumResponse.body.title}"></div>
    <div data-text="Artist: ${albumResponse.body.artist}"></div>

    <div><b data-text="${albumResponse.body.songs.length} songs:"></b></div>
    <template 
      is="e-for-each"
      data-list-to-iterate="${albumResponse.body.songs}"
      data-item-name="song">
      <div class="song-box">
        <div data-text="No. ${song.index}/${album.songs.length}"></div>
        <div data-text="Title: ${song.title}"></div>
        <div data-text="Length: ${song.length}"></div>
      </div>
    </template>
</template>

data-list-to-iterate , . data-item-name , e-for-each .

e-for-each e-if :

<template is="e-json" data-src="/../album/Humbug" data-object-name="albumResponse">
    <div data-text="Title: ${albumResponse.body.title}"></div>
    <div data-text="Artist: ${albumResponse.body.artist}"></div>

    <div><b data-text="${albumResponse.body.songs.length} songs:"></b></div>
    <template is="e-for-each" 
      data-list-to-iterate="${albumResponse.body.songs}" 
      data-item-name="song">
      <template 
         is="e-if"
         data-condition-to-display="${(song.length.split(':')[0] * 60 + song.length.split(':')[1] * 1) <= 210}"
      >
        <div class="song-box">
          <div data-text="No. ${song.index}/${album.songs.length}"></div>
          <div data-text="Title: ${song.title}"></div>
          <div data-text="Length: ${song.length}"></div>
        </div>
      </template>
    </template>
</template>

data-condition-to-display e-if , .

— . json , e-form, .

, / :

/artist/{name}/albums/add 
name = 'Arctic Monkeys'
POST
Example of expected request body: {
  "title": "Humbug",
  "type": "studio album",
  "releaseDate": "19 August 2009",
  "genre": ["psychedelic rock", "hard rock", "stoner rock", "desert rock"],
  "length": "39:20",
  "label": "Domino",
  "producer": "James Ford, Joshua Homme"
}

, :

<e-form>

  Title:
  <input type="text" name="title">

  Type:
  <input type="radio" name="type" value="studio album" checked>
  <label for="one">One</label>

  <input type="radio" name="type" value="live album" checked>
  <label for="one">One</label>

  Release date:
  <input type="date" name="releaseDate">

  Genre:
  <input type="checkbox" name="genre" value="psychedelic rock">
  <input type="checkbox" name="genre" value="hard rock">
  <input type="checkbox" name="genre" value="stoner rock">
  <input type="checkbox" name="genre" value="desert rock">

  Total length:
  <input type="time" name="totalLength">

  Producer:
  <input type="text" name="producer">

  <button
    id="send"
    data-request-url="/artist/Arctic_Monkeys/albums/add"
    data-request-method="POST"
    data-request-headers="{}"
    data-ajax-icon="#ajax-icon"
    data-response-name="savedAlbum"
    onclick="this.form.submit(this)"
    data-actions-on-response="
      logToConsole('response: ', '${savedAlbum}');
    "
  />

  <img id="ajax-icon" src="/../images/ajax-loader.gif"/>

</e-form>

, , , . , , . ajax , . , — . , . .

यदि आप विचार में रुचि रखते हैं और यहां तक कि पुस्तकालय को कार्रवाई में आज़माना चाहते हैं या बस कुछ और सीखना चाहते हैं, तो README पुस्तकालय में समर्थित तत्वों के बारे में व्यापक जानकारी है। आप एक वीडियो भी देख सकते हैं, जहाँ मैं विशेष रूप से EHTML का उपयोग करके एक साधारण ब्लॉग अनुप्रयोग लिखता हूँ।

मुझे इस तरह के सवाल उठने पर खुशी होगी। और आपका ध्यान के लिए धन्यवाद!

शलजम का लिंक ।

उन्नत HTML

लाइब्रेरी कनेक्शन

वैकल्पिक प्रणाली

ajax

More articles: