でHTMLをレンダリングする

WebページにHTML要素をレンダリングする必要があります.“ちょうど右”のGoldilocksの検索のように、あなたは正しいものを見つける前にいくつかのテクニックを試してください.フレームワークを使用するのは難しいかもしれません.使用は柔らかすぎるかもしれません.あなたが必要とするものはちょうど真ん中にある何かです.HTMLの"ちょうど右"ですか?見つけましょう.
まず、これがどのように機能するかを示します.次に、この記事の最後に、私はあなたが自分のためにこれを試してリットHTMLを始めるために必要なすべてを説明します.

When you're done, you can push your HTML app with lit-html to the cloud to see it in all of its glory! I included a link to a free Azure trial, so you can try it yourself.

リソース

lit-html guide

VS Code and Type Script

VS Code extension for lit-html .

VS Code

Free Azure Trial

You can learn about

サンプルアプリ
ここでは、この記事で紹介するアプリです.これは、ヒーローのリストを取得し、ボタンをクリックすると、それらをレンダリングします.また、フェッチ中に進捗インジケータをレンダリングします.


HTMLの値は何ですか
あなたがコンテンツをレンダリングするに焦点を当てると、何も他の、点灯HTMLは良いフィットです.これは、コンテンツをレンダリングするDOMと密接に動作し、最適な方法でそれをリフレッシュ.Docsは詳細を提供することができますが、リスティングHTMLの基本コードはこのようになります.

// Credit: As seen in official docs https://lit-html.polymer-project.org/guide/getting-started

// Import lit-html
import { html, render } from 'lit-html';

// Define a template
const myTemplate = name =>
  html`
    <p>Hello ${name}</p>
  `;

// Render the template to the document
render(myTemplate('World'), document.body);

リスティングHTMLをインポート、テンプレートを定義し、それをDOMにレンダリングします.それだ!

レンダリングHTML
進行状況バーはかなり基本的です.いくつかのHTMLがあり、必要なときに表示し、必要でないときにそれを隠します.これには、テンプレート、またはinnerhtml、またはDOM APIを使用することができますが、これはリスティングHTMLでどのように見えるかを見てみましょう.
まず、進行状況バーが表示されるDOM内の要素への参照を取得します.
次に、テンプレートを定義します.このコードはJSX(またはTSX)のように見えます.ここでの利点はHTMLを書くことができます.HTMLをテンプレート文字列にラップします(バックチック文字に注意して、単一引用符ではない).テンプレート文字列を使用すると、必要に応じて行をまたいで変数を挿入することができます.この作品を作る魔法はhtml テンプレート文字列の前にあるタグ.The html タグは、あなたがテンプレートを定義しようとしているHTMLを指示するものです.
次に、テンプレートをコンパイルし、結果をHTMLrender 関数はDOMに結果を格納します.最後に、必要に応じて進捗バーを非表示または表示します.

function showProgress(show = true) {
  const container = document.getElementById('progress-placeholder');

  const template: () => TemplateResult = () => html`
    <progress class="progress is-medium is-info" max="100"></progress>
  `;
  const result = template();
  render(result, container);

  container.style.display = show ? 'block' : 'none';
}

これで実行できますshowProgress 関数は、プログレスバーを表示する任意の時間.

Note that when a template is re-rendered, the only part that is updated is the data that changed. If no data changed, nothing is updated.

動的値を用いたHTMLのレンダリング
進捗バーは、レンダリングされるたびに変更されません.あなたは、あなたのHTMLを変えたい状況を持ちます.たとえば、タイトルとメッセージのスタイルメッセージボックスを表示するWebアプリケーションにメッセージ領域があります.タイトルとメッセージは、メッセージ領域を表示するたびに変更されます.今、あなたはダイナミックな値を持っています.
HTMLはテンプレート文字列で定義されているので、変数を追加するのは些細なことです.以下のコードがテンプレートにタイトルとテキストを加えます${data.title} and ${data.text} シンタックスそれぞれ.
次に、テンプレートがコンパイルされ、レンダリングが必要になりました.
このテンプレートが再描画されると、更新される唯一の部分が変更されたデータです.この場合、それはタイトルとテキストです.

function showMessage(text: string, title = 'Info') {
  const template: (data: any) => TemplateResult = (data: Message) => html`
    <div id="message-box" class="message is-info">
      <h3 class="message-header">${data.title}</h3>
      <p class="message-body">${data.text}</p>
    </div>
  `;

  const el = document.getElementById('message-placeholder');
  const result = template({ title, text });
  render(result, el);

  el.style.visibility = !!text ? 'visible' : 'hidden';
}

リストのレンダリング
物事は私たちがリストをレンダリングするときに少しリアルになる.ちょっと考えましょう.リストにはデータがなければプランを持っている必要があります.リストでは、行ごとに同じものをレンダリングする必要があります.リストには、それぞれの行に異なる値を渡す必要があります.それから、我々は列をとって、Aのような容器で彼らを包まなければなりません<ul> または<table> .
したがって、HTMLや他のテクニックを使用するかどうかに関係なく、もう少しロジックがあります.方法を調べましょうreplaceHeroList 関数は、LITE HTMLを使用して行をレンダリングします.

function replaceHeroList(heroes?: Hero[]) {
 const heroPlaceholder = document.querySelector('.hero-list');

 // Define the template
 let template: () => TemplateResult;

 if (heroes && heroes.length) {
   // Create the template for every hero row
   template = createList();
 } else {
   // Create the template with a simple "not found" message
   template = () =>
     html`
       <p>heroes not found</p>
     `;
 }

 // Compile the template
 const result = template();

 // Render the template
 render(result, heroPlaceholder);

英雄がいるとき、私たちはcreateList 関数.この関数は、TemplateResult . だから、すべてのヒーローのheroes 配列を定義します<li> それぞれのヒーローを表示するHTMLを含む.
それから、我々は以下を含むもう一つのテンプレートをつくります<ul> そして、ヒーローテンプレートの配列を埋め込む.これは、我々はこのようなテンプレートを埋め込むことができるクールです!最後に、すべてを返し、ロジックをテンプレートにコンパイルしてレンダリングします.

function createList() {
  // Create an array of the templates for each hero
  const templates: TemplateResult[] = heroes.map(hero => {
    return html`
      <li>
        <div class="card">
          <div class="card-content">
            <div class="content">
              <div class="name">${hero.name}</div>
              <div class="description">${hero.description}</div>
            </div>
          </div>
        </div>
      </li>
    `;
  });

  // Create a template that includes the hero templates
  const ulTemplate: () => TemplateResult = () =>
    html`
      <ul>
        ${templates}
      </ul>
    `;
  return ulTemplate;
}

概要
ときにHTMLをレンダリングするには、点灯HTMLは高速で軽量なオプションです.それは、テンプレートとDOM APIを使うよりよいですか?あなたは何があなたのために最善を決定する必要があります.しかし、ここで本当の話は、あなたの仕事のための適切なツールを決定するときに考慮する別の大きなオプションがあることです.

プロローグ
また、あなたの照会HTMLテンプレートでエディタのヘルプを得ることができます.以下のイメージがHTMLテンプレートのために構文を強調しているのを見てください!


セットアップ
あなたはNPMでリットHTMLパッケージをインストールすることができます.

npm install lit-html

代わりに、unpkgから直接読み込むことができます.COM CDN

import { html, render } from 'https://unpkg.com/lit-html?module';

ここに選択があります.NPMは私の好みですが、あなたに合うならば、100 %自由にCDNを使用するように感じてください.

HTMLスクリプト
あなただけのリスティングHTMLのライブラリを含める必要がありますしている.しかし、私はtypescriptを使用するのが好きです、そして、私は絶対にあなたのtoolingをTypeScriptとLITE HTMLで大きく動かすのを可能にすることを勧めます.

Let me be very clear here - you do not need TypeScript. I choose to use it because it helps identify mistakes while I write code. If you don't want TypeScript, you can opt to use plain JavaScript.

ここでは、入力スクリプトと照明のHTMLライトを一緒にする手順です

サポートHTMLスクリプトの入力スクリプトサポート

設定するtsconfig.json ファイル

のコード拡張子をインストールする

このコマンドを実行して、プロジェクトに依存してプラグインとスクリプトをインストールします.

npm install --save-dev typescript-lit-html-plugin typescript

エディットtsconfig.json 以下を加えることによってcompilerOptions セクション.

"compilerOptions": {
  "plugins": [
    {
      "name": "typescript-lit-html-plugin"
    }
  ]
}

最後にインストールVS Code extension for lit-html .
今すぐあなたのすべてのHTMLテンプレートの強調表示構文を取得!