6

私は口ひげで解析できず、常に返すこの非常に単純な構造を持っています:

閉じていないセクション: 選択済み

<ul id="source">
{{#recomms}}                                                                                                                                                                                                 
  <li>
    <select>
      {{#sizes}}
        <option {{#selected}}selected="selected"{{/selected}} >{{label}}</option>
      {{/sizes}}
    </select>
  </li>
{{/recomms}}
</ul>

JavaScript のレンダリング:

$("#placement").html(Mustache.render($('#source').html(), data));

オプションタグから #{{selected}} を移動すると、正しく動作し始めます。

mustache は、html 要素内に配置されたネストされた #{{ タグをサポートしていますか?

4

1 に答える 1

7

口ひげはこのように動作するはずです。正しく実行しています。

これは単純なテキスト パーサーなので、HTML の構造やタグなどは気にしません。

Mustache に使用している環境 / パーサーのバージョンは? これは公式のデモで動作するようです。

Mustache デモ サイトで次のように入力したところ、期待どおりに動作しました。

口ひげのテンプレート

<ul id="source">
{{#recomms}}                                                                                                                                                                                                 
  <li class="">
    <select name="size" class="recommendation-size">
      {{#sizes}}
        <option value="{{val}}" {{#selected}}selected="selected"{{/selected}} >{{label}}</option>
      {{/sizes}}
    </select>
  </li>
{{/recomms}}
</ul>

サンプル JSON

{"recomms": [
    {"sizes": [
        { "val": "value", "label": "label", "selected": false },
        { "val": "value2", "label": "label2", "selected": true }
    ]}
]}

出力

<ul id="source">
<li class="">
<select name="size" class="recommendation-size">
<option value="value" >label</option>
<option value="value2" selected="selected">label2</option>
</select>
</li>
</ul>

発生しているエラーを示すFiddleにリンクできる場合は、何が起こっているのかを理解するのに役立ちますが、これは機能するはずです。

編集

私は問題を発見したかもしれません。jQuery を使用して既存の HTML 要素から HTML を読み込んでいます。つまり、ブラウザーは既に HTML のレンダリングを試みており、ビットを含む無効なビットを破棄してい{{/selected}}ます。

Mustache テンプレートを Javascript コードにロードするには、次のような別の手法を使用してみてください。

  • ページの HTML ソースではなく、Javascript 変数にテンプレートを配置します。
  • jQuery.get()を使用してサーバーからテンプレートをロードします
  • <テンプレート内のandをエスケープ>して hiddentextareaに配置し、jQuery の.val()メソッドを使用してテンプレートを取得し、レンダリングする前に<andのエスケープを解除します。>

コメントで指摘したように、最初のオプションはうまく機能します!

于 2012-12-10T10:53:46.997 に答える