javascript - どうすればヒスイに口ひげを生やさせることができますか?

Question

これは私の翡翠の置物です:

section#entry-review-template.template(data-class='entry-review')
  table
    thead
      tr
        th='Date'
        th='Title'
        th
    tbody

口ひげを生やし始めると、いつもの気品が失われていくような気がします。

  {{^entries}}
  h1='No Posts'
  div='There are no blog posts to review.'
  {{/entries}}

しかし、今度は彼女の体に最後の口ひげを付けようとすると、彼女は不平を言い始め、壊れて助けたくないか、ただ混乱するだけです.

{{#entries}}
  tr
    td='{{date}}'
    td='{{title}}'
    td
      a.remove-entry
 {{/entries}}

次のような結果になります。

{{^entries}}
<h1>No Posts</h1><div>There are no blog posts to review.</div>{{/entries}}
{{#entries}}
<table><thead><tr><th>Date</th><th>Title</th><th></th></tr></thead><tbody></tbody></table>{{date}}{{title}}<a class="remove-entry"></a>{{/entries}}

ヒスイに口ひげのプレーンテキストを適切に出力させることができないようです。

これは、サーバー側でビューをテンプレート化するために jade を使用する node.js アプリケーションです。どのビューにもモデルを渡しません (そのような面倒な作業はクライアント側に任せます)。inclue partialどこでもたくさんする必要があります。そして、私はたくさんの翡翠を持っています。そして、私は翡翠が大好きです。彼女を手放したくない。

ここで、クライアント側に非常に単純な口ひげテンプレートを実装したいと考えています。これらのテンプレートをビュー内でインライン化したいと考えています。

もちろん、私はそれを回避し、これらをスクリプトタグに含めるか、別のビューエンジンでレンダリングすることができます (今考えてみると、それは簡単なことでも簡単なことでもありません)。それらの生のhtmlを書くために、私は両方の長所を混ぜ合わせたいと思っていました。

私は挑戦することさえ狂っていますか？
これはただのゲームだとジェイドに伝えて、彼女に私のメッセージを無視させるにはどうすればよい{{#must}} {{/ache}}ですか?
翡翠に空白を無視するように指示することはできますか?
他にどのようなオプションを検討する必要があると思いますか?

ジェイドに口ひげを生やしてほしい。私はそれが奇妙であることを知っていますが、それは私を興奮させます.

アップデート：

|を使ってみました、ここに文書化されていますが、最も単純なものでも:

section#entry-review-template.template(data-class='entry-review')
  table
    thead
      tr
        th='Date'
        th='Title'
        th
    tbody
      | {{#entries}}
      | {{/entries}}

最終的に出力されます：

{{#entries}}
{{/entries}}
<table><thead><tr><th>Date</th><th>Title</th><th></th></tr></thead><tbody></tbody></table><h1></h1>

score 11 · Accepted Answer

いくつかの Jade ミックスインを定義しましょう。

mixin if(name)
  != '{{#' + name + '}}'
  block
  != '{{/' + name + '}}'

mixin unless(name)
  != '{{^' + name + '}}'
  block
  != '{{/' + name + '}}'

mixin each(name)
  != '{{#' + name + '}}'
  block
  != '{{/' + name + '}}'

Jade テンプレートでそれらを流暢に使用します。

section#entry-review-template.template(data-class='entry-review')
  +unless('entries')
    h1='No Posts'
    div='There are no blog posts to review.'
  table
    thead
      tr
        th='Date'
        th='Title'
        th
    tbody
      +each('entries')
        tr
          td='{{date}}'
          td='{{title}}'
          td
            a.remove-entry

美しい口ひげの HTML が生成されます。

<section id="entry-review-template" data-class="entry-review" class="template">{{^entries}}
  <h1>No Posts</h1>
  <div>There are no blog posts to review.</div>{{/entries}}
  <table>
    <thead>
      <tr>
        <th>Date</th>
        <th>Title</th>
        <th></th>
      </tr>
    </thead>
    <tbody>{{#entries}}
      <tr>
        <td>{{date}}</td>
        <td>{{title}}</td>
        <td><a class="remove-entry"></a></td>
      </tr>{{/entries}}
    </tbody>
  </table>
</section>

score 8 · Accepted Answer

さて、これは遅すぎて役に立たない可能性があり、すでに受け入れられている回答があります（ところで、「コメントを削除できる」というのが実際に何を意味するのかよくわかりませんでした）。ただし、将来の作業ですべての人に役立つ可能性があると思ったので、これまでに見つけたものを以下に示します。

上記のコードから小さなスニペットを取り出して、奇妙なごちゃごちゃした出力が得られたのと同じ単純な「テキスト出力」構文を使用して、それらを例に入れます。

section#entry-review-template.template(data-class='entry-review')
  table
    thead
      tr
        th Date
        th Title
        th
    tbody
      | {{#entries}}
      tr
        td {{date}}
        td {{title}}
        td
          a.remove-entry
      | {{/entries}}

これを Jade ライブサイト ( http://naltatis.github.com/jade-syntax-docs ) の編集ボックスに入力すると、Jade から次のような出力が得られます。

<section id="entry-review-template" data-class="entry-review" class="template">
  <table>
    <thead>
      <tr>
        <th>Date</th>
        <th>Title</th>
        <th></th>
      </tr>
    </thead>
    <tbody>{{#entries}}
      <tr>
        <td>{{date}}</td>
        <td>{{title}}</td>
        <td><a class="remove-entry"></a></td>
      </tr>{{/entries}}
    </tbody>
  </table>
</section>

次に、次のデータを使用して、TryHandlebars サイト ( http://tryhandlebarsjs.com ) で試してみました。

{ "entries" :
  [
   { "date" : "Jan 2, 2010", title: "ABCDEF" },
   { "date" : "Nov 15, 2012", title: "UVWXYZ" }
  ]
}

そして、次の出力で適切に実行されました。

<section id="entry-review-template" data-class="entry-review" class="template">
  <table>
    <thead>
      <tr>
        <th>Date</th>
        <th>Title</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Jan 2, 2010</td>
        <td>ABCDEF</td>
        <td><a class="remove-entry"></a></td>
      </tr>
      <tr>
        <td>Nov 15, 2012</td>
        <td>UVWXYZ</td>
        <td><a class="remove-entry"></a></td>
      </tr>
    </tbody>
  </table>
</section>

あなたが試みていたことと私が何か違うことをしているかどうかはわかりませんが、(少なくとも表面的には) Jade テンプレートから手動で Mustache/Handlebars テンプレートを競合することなく作成できるようです。より複雑なテンプレートとの競合が発生する可能性がありますが、見つかりませんでした。

私自身、かなり長い間このアイデアをいじっていて、少し掘り下げてきました。しかし、私の主な原動力は、Mustache/Handlebars の単純な「ロジックのない」ロジック構造と、Haml/Jade の美しい冗長性の削減が本当に好きで、その組み合わせが欲しかったということでした。そのためには、Hamlbars や、私が実験している EmblemJS の方が優れていると思われます。

score 3 · Accepted Answer

解決策: jade のHTML コメント

  // {{#entries}}
  tr.entry-row(data-id='{{_id}}')
    td='{{date}}'
    td='{{title}}'
    td
      a.edit(title='Edit')='Edit'
      a.remove(title='Delete')
  // {{/entries}}

魅力のように機能します。後でコメントを削除することもできますが、少なくともこれでうまくいきます。

javascript - どうすればヒスイに口ひげを生やさせることができますか?

アップデート：

4 に答える 4

Related

Reference