1

ユーザーが（同様のレイアウトの）アイテムを追加/削除できるUIを作成しています。

1 つのアイテムから始まり、[追加] をクリックしてさらに追加できます。UI は、いくつかの異なるタイプのアイテムで構成されています。

私が現在行っていることは、item 1(各タイプの) 単一のアイテムを生成することであり、addイベントで、 を複製しitem 1、 でユーザーが行った変更を置き換え、item 1複製を に追加しますcontainer。簡単に言えば、jQuery で動的に html を作成する代わりに、.html のクローンを作成していdivます。しかし、このアプローチでは、新しいアイテムを初期状態にするために、多くのことを変更しなければなりませんでした。

そこで、ユーザーが行った編集を置き換えるのは避けたいので、以下のように考えていましたが、

<script type="text/template" id="item_type1">
  <div>
    <div>Box</div>
  </div>
</script>

<script type="text/template" id="item_type2">
  <div>
    <div>Box2</div>
  </div>
</script>

そしてaddイベントでは、何かをしたい、新しいアイテムを作りたい$('#item_type1').html()と思っています。$('#item_type2')

handlebar や mustache のような洗練されたライブラリがあり、underscore にはテンプレートを実装する独自の方法があることは知っています。

しかし、私はこれらのいずれもまだ使用していないため、コンテンツをコピーするためだけに含めたくありません。特別なことは何もしたくない。私は変数を渡していません。マークアップを複製して何度も使用しています。

タグに挿入するこの方法はhtml、すべてのブラウザで機能しますか? scriptそれは良い方法ですか？

編集：

それはwpプラグイン用で、jsがオンになっていると仮定します。そうしないと、プラグインはとにかく機能しません。

4

2 に答える 2

2

どうですか：

HTMLは次のようになります。

<script type="text/template" id="item_type1">
  <div>
    <h1>Box1</h1>
    <p>
    </p>
  </div>
</script>

そして、あなたのコードは次のようになります：

var templateHtml = $('#item_type1').html();

var $item = $(templateHtml);
$('body').append($item);
$item.on('click', function() {});

これは、すべてのブラウザで機能する簡単な方法です。

于 2013-03-19T04:57:11.913 に答える
0
  • ステップ 1: テンプレートを含む HTML ファイルを作成する

  • ステップ 2: jQuery のload()メソッドを使用して、HTML テンプレートをdivメイン HTML ファイルの要素に呼び出します。

    $("#main-div").load("yourtemplate.html")

  • ステップ3：驚く

これは良い考えですか？場合によります：

それが既知の環境での自己完結型アプリケーションであり、サポートされているブラウザーが決まっていて、設定が同じように (JavaScript がオンになっているかどうかなど) ある場合は、そうです。なぜだめですか？

多くの異なる構成で可能なすべてのブラウザで公開されている場合、いいえ、それは恐ろしい考えです. ユーザーが JavaScript を有効にしていない場合、コンテンツは表示されません。また、スクリプトの 1 つが本番環境で壊れると、再びコンテンツがなくなります。ゴーカーがこれと同じ過ちを犯したときから、この教訓を学ぶことができます

于 2013-03-19T05:01:47.480 に答える