1

JS のコーディングから始めて、今日は JS のおかげで HTML テンプレートを HTML に数回挿入します。ただし、html インデントを縮小し、多数の行 (div、h1、span、table、tr、td、tt) を 1 つの var 行に折りたたむという体系的な必要性に戸惑っています。縮小された html は、準備が難しく、テスト フェーズに沿って頻繁に美化する必要があります。

また:美しいインデントされた html を変数に保持する方法はありますか?

有効なバージョンを持ついくつかの構文:

var exampleTpl = "
      <div data-demo-html="true">
        <div data-role="collapsible-set" data-inset="true" data-theme="b" data-content-theme="d">
          <div data-role="collapsible" data-collapsed="false">
            <h4>Heading</h4>
            <ul data-role="listview" data-filter="false" data-inset="true">
              <li><a href="#">List item 1</a></li>
              <li><a href="#">List item 2</a></li>
              <li><a href="#">List item 3</a></li>
            </ul>
          </div>
"

よろしくお願いします。

4

2 に答える 2

3

テンプレート化の目的で、Handlebars.js ホームページの例を見てください。

テンプレートを宣言する

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

JavaScript でテンプレートをコンパイルする

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

HTML を膨らませる

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

これにより、テンプレートのインスタンスが生成されます (テンプレートに値が挿入されます) :

<div class="entry">
  <h1>My New Post</h1>
  <div class="body">
    This is my first post!
  </div>
</div>
于 2013-01-31T10:27:36.890 に答える
0

あなたはこのようにすることができます：

var exampleTpl =
      '<div data-demo-html="true">' + 
        '<div data-role="collapsible-set" data-inset="true" data-theme="b" data-content-theme="d">' +
          '<div data-role="collapsible" data-collapsed="false">' +
            '<h4>Heading</h4>' +
            '<ul data-role="listview" data-filter="false" data-inset="true">' +
              '<li><a href="#">List item 1</a></li>' +
              '<li><a href="#">List item 2</a></li>' +
              '<li><a href="#">List item 3</a></li>' +
            '</ul>' +
          '</div>' +
        '</div>' +
      '</div>';

本当に欲しかったら...

ただし、口ひげJSでテンプレートを表現している場合（そこでタグを見るだけ）、私は個人的にテンプレートをスクリプト要素に追加し、いくつかのテンプレートライブラリ（handlebarsjs.comなど）で提案されているようにinnerHTMLを使用してそれらにアクセスします。 ）。

例えば：

    <script type="text/html" id="myTemplate">
     <div data-demo-html="true">
        <div data-role="collapsible-set" data-inset="true" data-theme="b" data-content-theme="d">
          <div data-role="collapsible" data-collapsed="false">
            <h4>Heading</h4>
            <ul data-role="listview" data-filter="false" data-inset="true">
              <li><a href="#">List item 1</a></li>
              <li><a href="#">List item 2</a></li>
              <li><a href="#">List item 3</a></li>
            </ul>
          </div>
        </div>
      </div>
    </script>
于 2013-01-30T16:17:17.370 に答える