4

現在、ウィジェット モジュールを構築しようとして、MustacheJS テンプレートの問題に直面しています。

実際、私は html テンプレートを 2 回使用しています。

  • サーバーは html テンプレートを解析し、サーバー データでレンダリングします。
  • サーバーによって構築されたクライアント ダウンロード ページ (サーバー側の口ひげによって既にレンダリングされているため) と、ajax 要求の後に、ブラウザーで口ひげの 2 番目のレンダリングを適用したいと考えています。

しかし、問題は、サーバー側で変数が空であるため、クライアント側でテンプレート html がレンダリングされないことです...

<!-- Rendered on server side -->
<div class="content noise">
    <h4>{{widget.title}}</h4>
    <p>Issues from {{widget.github.author}}/{{widget.github.repo}}</p>
    <div class="issues"></div>
</div>

<!-- I want to render this only on client side -->
<script type="text/template" id="issueTemplate">
{{#links}}
    <a href="{{url}}" {{#selected}}class="Selected"{{/selected}}>{{{name}}}</a>
{{/links}}
</script>

{{links}} がサーバー側で空であるため、ここで issueTemplate は空です。

クライアント側では、次のようなことを試して、「{{」タグを「[[」に置き換えましたが、効果はありません:

self.mu = _.clone(Mustache) ;
self.mu.tags = ['[[', ']]'] ;

たとえば、「スクリプト」などのレンダリングからタグを無視する方法についてのアイデアはありますか?

4

2 に答える 2

15

Mustache では、タグを使用してその場でタグ区切り文字を変更できます{{= ... =}}。これを使用して、リテラルに存在しない区切り文字を選択してリテラル セクションを作成できます。したがって、次のようなことができます

<!-- Rendered on server side -->
<div class="content noise">
  <h4>{{widget.title}}</h4>
  ...
<!-- I want to render this only on client side -->

{{={{{ }}}=}}
<!-- Now only triple braces will be interpreted as tags on the server side -->
<!-- Double braces will be passed through literally -->

<script type="text/template" id="issueTemplate">
{{#links}}
...
{{/links}}
</script>

{{{={{ }}=}}}
<!-- Now double braces delimit tags again if you need to do more server-side rendering-->
于 2012-09-11T03:12:27.150 に答える
0

おそらくそれは最善の解決策ではありませんが、サーバー側で正しい値に置き換えると機能します。IE

{{#links}}
{{/links}}

サーバー側で無視したい、要素を作成する

{{Sublink}}
{{ClSublink}}

サーバー側では、このように値を「リンク」に置き換えます

Sublink = {{#link}}
ClSublink = {{/links}}

そして、それは機能します。私にとっては、トリプルブレースの使用は機能しません:(、しかし、この方法ではうまく機能します。

于 2018-05-11T09:58:47.890 に答える