web-dev-qa-db-ja.com

JadeでHTMLエンコード要素の属性を停止し、リテラル文字列値を生成する方法

[〜＃〜] update [〜＃〜] Jade v0.24.0は、属性の_!=_構文でこれを修正します。 option(value!='<%= id %>')

私は_<option>_をjadeで構築しようとしています。オプションの値はUnderscoreJSテンプレートマーカーです：_<%= id %>&lt;= id &gt;_。

これが私のジェイドマークアップです。

_script(id="my-template", type="text/template")
  select(id="type")
    &lt;% _.each(deviceTypes, function(type){ %>
    option(value='&lt;%= type.id %>') <%= type.name %>
    &lt;% }) %>
_

私はそれがこのHTMLを生成することを期待しています：

_<script id="my-template" type="text/template">
  <select id='type'>
    <% _.each(deviceTypes, function(type){ %>
    <option value="<%= type.id %>"> <%= type.name %> </option>
    <% }) %>
  </select>
</script>
_

しかし、代わりに私が得るのはこれです：

_<script id="my-template" type="text/template">
  <select id='type'>
    <% _.each(deviceTypes, function(type){ %>
    <option value="&lt;%= type.id %&gt;"> <%= type.name %> </option>
    <% }) %>
  </select>
</script>
_

出力の_<option>_行の微妙な違いに注意してください...オプションのvalue属性はHTMLエンコードされています。

Jadeがこの値をHTMLエンコードしないようにするにはどうすればよいですか？オプションのテキストと同じ方法で、リテラル値を生成する必要があります。

templatesunderscore.jspughtml-encodestring-literals
37
Derick Bailey

この記事を書いている時点では、それへの道があるとは思わない。この問題を参照してください： https://github.com/visionmedia/jade/issues/198

|を使用して、それを解決するために生のHTMLにドロップしました。プレフィックス。

5
Kevin Dente

Derickは既にJadeがunescape HTMLエンコーディングの新機能をアップデートに追加したことを言及しましたが、認識できないかもしれない人のためにいくつかの補遺を追加したいと思います。

- var html = "<script></script>"
| !{html} <-- Escaped
| #{html} <-- Encoded

from https://github.com/visionmedia/jade

99
Minime

この機能は Jadeに追加 です。属性値をエスケープ解除する場合は、単に!=演算子を使用します。

script#my-template(type='text/template')
  a(href!='<%= url =>') Clicky clicky...
33
Mike M. Lin

だから私はこれに似た問題を抱えていて、Jadeビューの1つにアンダースコアテンプレートを作成したかったのです。 <option>タグのselected属性を設定するために必要なUnderscoreテンプレートの一部。

最初は、アンダースコアに「選択済み」または「」を返させました。残念ながら、 Jadeには値のない属性を表示する方法はありません であり、属性名をエスケープしない方法はありません（アンダースコアビットは引用符なしで戻ってきました）。

幸いなことに、引用符を保持したまま、属性のvalueをエスケープ解除できます。

この例では、文字列値に一致する所有者タイプに基づいてドロップダウンの値を選択しています。手動で引用符をエスケープする必要がないように、ヘルパー関数を設定します。

- var checkType = function(type) { return "<%= contact.type == '" + type + "' %>" };

.clearfix
  label Title:
  .input
    select(type="text", name="contact[title]", class="new-title")
      option(value="") Choose Title
      option(value="manager", selected="#{ checkType('manager') }") Manager
      option(value="member", selected="#{ checkType('member') }") Member
      option(value="owner", selected="#{ checkType('owner') }") Owner
      option(value="president", selected="#{ checkType('president') }") President
      option(value="individual", selected="#{ checkType('individual') }") Individual
      option(value="main_contact", selected="#{ checkType('main_contact') }") Main Contact

一部の人によると、ここで!{}を使用してすべてのエンコーディング（<, >, etc.）を完全に回避できるはずですが、これは私のバージョンのJadeでは機能しませんでした。 "^0.30"を使用していますが、現在のバージョンは1.xです。

誰かが!{}がJadeの最新バージョンを使用してこの状況で機能することを確認できる場合、回答を更新します。

0
AlbertEngelB