2

ここで基本的なものが欠けている必要がありますが、カスタムjQueryウィジェットを開発するときに、dojoカスタムウィジェットの場合と同様に、ウィジェットの一部としてhtmlテンプレートを含めるにはどうすればよいですか？現在、私のjQueryカスタムウィジェットはJavaScriptで必要なhtmlを生成しており、それをhtmlテンプレートに取り出して、カスタムウィジェットに含めようとしています。考え？

4

2 に答える 2

2

Handlebars.jsを見ることができます。これはjQueryテンプレートプラグインであり、構文は非常に簡単です

scriptタグでテンプレを宣言する

  <script id="entry-template" type="text/x-handlebars-template">
    <div class="entry">
        <h1>{{title}}</h1>
        <div class="body">
           {{body}}
        </div>
    </div>
  </script>

次に、このようにそのテンプレートをフェッチしてコンパイルします

  var source   = $("#entry-template").html();
  var template = Handlebars.compile(source);

palceholders次に、このようなデータを渡すことで、そのテンプレートをレンダリングできます

 var context = {title: "My New Post", body: "This is my first post!"}
 var html    = template(context);

この後、のようなjQueryDOM操作メソッドで使用できるfulin変数が作成さhtmlれます。html$.append

ワーキングフィドル

于 2012-05-23T18:40:32.360 に答える
1

あなたがやろうとしていることをするのに、プラグインや凝ったものは本当に必要ありません。適切なマークアップと必要な jQuery 呼び出しを使用して html ファイルを作成するだけで、ウィジェットを簡単に作成できます。たとえば、次のようなメイン ページを作成できます。

<html>
<head>
<!-- reference jquery library here -->
<script>
    $(document).ready(function() {
        $("#wdg1").load("mywidget.html");
        $("#wdg2").load("mywidget.html");
    });
</script>
</head>
<body>
<div id="wdg1"></div>
<div id="wdg2"></div>
</body>
</html>

そして、mywidget.htmlファイルは次のようになります。

<script>
    $(document).ready(function() {
        alert("Widget loaded.");
        // run whatever code you want here.
    });
</script>
<span>This span was loaded as a widget.</span>
于 2012-05-23T18:38:45.103 に答える