3

カスタムまたは再利用可能なコンポーネントを HTML で作成できますか?

マイページには、HTML、JS、jQuery コードを使用して実装されたアカウント検索機能があります。そして、私のページはさまざまな場所でのアカウント検索で構成されています。（機能は同じです）。使用するたびに div の ID のみが変更されます。

では、HTML でコンポーネントのようなものを考え出すことはできますか?

繰り返しますが、コードを別のファイルに記述して別の場所にインクルードすると、各領域で ID が変更されるため機能しません。サーバーへの呼び出し、データの取得、フィールドの更新などの ID の問題。

4

7 に答える 7

6

JavaScriptテンプレートを調べてください。一例としてmustache.jsを参照してください。

例えば

<script type="text/template" id="template">
   {{#elements}}
      <div id="{{id}}">
         {{content}}
      </div>
   {{/elements}}
</script>

そしてあなたのJavaScript：

var view = {
   "elements": 
    [
       {
          id: "one",
          content: "Lorem ipsum dolor"
       },
       {
          id: "two",
          content: "Sit amet consectetur"
       }
    ]
}

var template = document.getElementById("template").innerHTML;
var output = Mustache.render(template, view);
console.log(output);

ログ:

<div id="one">
   Lorem ipsum dolor
</div>
<div id="two">
   Sit amet consectetur
</div>

オブジェクトをループし、関数を評価して、テキストとして挿入できます。

于 2013-05-01T22:50:14.140 に答える
3

HTML はマークアップ言語であり、プログラミング言語ではありません。ほとんどの場合、 hamlのようなテンプレート エンジンを探しています。

于 2013-05-01T22:41:50.813 に答える
2

次のフレームワークは、問題の解決に役立ちます。

口ひげ

ハンドルバー

私は（Mustache の上に書かれている）HandleBar を使用することを好みます。

于 2013-11-21T06:41:38.197 に答える
1

angularJS を使用する場合は、コンポーネントで別の html ファイルを作成し、それを要素としてページに呼び出すことで、再利用可能な html ピースを作成できます。

app.directive("elementName", function() {
  return {
    restrict: 'E',
    templateUrl: "/Path/To/Html.file"
  };
});

次に、このコンポーネントを使用するすべての HTML ページで、次の操作を行うだけです。

<element-name></element-name>
于 2014-09-19T15:04:27.720 に答える
0

私は優れたテンプレート エンジンが大好きですが、単純なマークアップを使用してロジックを HTML コントロールから切り離すことができます。

ブートストラップはクラスを使用してこれを行い、データ属性もより正確な制御のために機能します。

コードを少しクリーンアップする必要があります。必要なすべてのコードを収集し、すべての参照を任意の ID にデタッチします。通常、ID を使用するスポットは 1 つまたは 2 つしかなく、変数を使用して残りの操作を実行するため、これは難しくありません。

すべてのコードを、要素を唯一の引数として受け取る 1 つの関数にまとめます。これは、以前は ID にハードコードされたものでした。コードで使用されているすべての ID をクラスに移動するか、できれば変数に移動します。これらのクラスおよび/またはウィジェット クラスの子孫を反映するように CSS を変更します (近日中に)。この時点で、関数を呼び出して要素を渡し、機能させることができるはずです。これを makeSearchFromElement() と呼びましょう。

function makeSearchFromElement(elm){
  elm.onchange=function(e){ alert("searching for " + elm.value); };
}

それができたら、必要なのはそれらを定義する簡単な方法だけです。例として「widget-search」のクラスを使用してみましょう。パッケージ内の検索機能が必要な html 要素にクラスを追加します。

<input class='search widget-search validation' id=search123 type=search />

あとは、HTML で宣言されているすべてのウィジェットを見つけて、サイト全体の JS ファイルのどこかにあるウィジェット メーカーに送信するだけです。

[].slice
  .call(document.getElementsByClassName("widget-search"))
  .map(makeSearchFromElement);

body タグの最後に挿入しない場合は、その最後のビットを ready() または onload() イベントに配置する必要があります。

HTML にクラスを追加するだけで、入力がデモの「検索」機能を持つようにするために必要なことはこれだけです。CSS や JS を 1 行ずつ追加する必要はありません。サイト上の各コードに 1 か所からパッチを適用したり、アップグレードしたりできます。また、ネットワーク経由で送信されるカスタム コードの量が減るため、手動でバインドしたり、テンプレートを作成したりするよりもページの読み込みが速くなります。

于 2013-05-01T23:57:15.447 に答える
0

このブログ投稿を参照してください。Handlebar.jsを使って「再利用可能なコンポーネントを作成する方法」を詳しく説明しています。間違いなく読む価値があります。

以下のコードは、アプリに datetimepicker を追加するのに十分です。

{{datetime "d1" "Start Date"}}

このためのjsFiddle

于 2013-09-21T05:50:13.797 に答える