Get best of the week

Erweitertes HTML

In diesem Artikel möchte ich ein wenig über die Bibliothek erzählen, deren erste Version ich Ende letzten Jahres erstellt habe. Der Punkt ist sehr einfach - die Funktionen der HTML-Sprache zu erweitern, so dass Sie einfache und routinemäßige Dinge ohne JavaScript schreiben können: Senden des Formulars im JSON-Format, Laden von HTML-Vorlagendateien auf eine bestimmte Seite (im Wesentlichen ein modulares System für HTML über http / s-Anforderungen), Turbinen ( Hallo an RoR-Benutzer), eine einfache Vorlage, die auf den Antworten von Ajax-Anfragen und etwas mehr basiert.


Bild


Die Bibliothek heißt EHTML oder Extended HTML. Es basiert auf der berüchtigten Idee von Webkomponenten . Es ist auf dem Github verfügbar , es gibt eine ziemlich gut strukturierte Dokumentation mit Beispielen. In diesem Artikel werde ich einfach die Hauptideen beschreiben, vielleicht geht es an jemanden.


Bibliotheksverbindung


Um ein Projekt zu erstellen, benötigen Sie zunächst weder npm- noch cli-Tools. Sie benötigen lediglich die HTML-Seite, auf der Sie das Bibliotheksskript einfügen :


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

Modulares System


Beginnen wir mit einer einfachen - Kompilieren einer HTML-Seite aus vielen anderen:


<!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>

Zu diesem Zweck verwenden wir ein benutzerdefiniertes Element e-htmlmit einem einzelnen Attribut data-src, in dem angegeben wird, wo der HTML-Teil der Seite verteilt ist. Das heißt, wenn es zum Beispiel first.htmlso aussieht:


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

dann wird unsere Seite letztendlich wie folgt gerendert:


<!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>

Das heißt, die Tags e-htmlwerden durch den Inhalt der HTML-Datei ersetzt, die wir im data-srcAttribut angegeben haben.


<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 , . , — . , . .



Wenn Sie an der Idee interessiert sind und die Bibliothek sogar in Aktion ausprobieren oder einfach etwas mehr lernen möchten, bietet die README- Bibliothek umfassende Informationen zu den unterstützten Elementen. Sie können sich auch ein Video ansehen, in dem ich eine einfache Blog-Anwendung ausschließlich mit EHTML schreibe.


In solchen Fällen beantworte ich gerne Fragen. Und vielen Dank für Ihre Aufmerksamkeit!


Link zu Rüben .

More articles:


All Articles