1

SocketStream を使用して値のテーブルを動的に更新しようとしています。テーブルを定義する Jade テンプレートがあります。

app.jade:

table
  thead
    tr
      th key
      th value
    tbody
      - var jadeItems = [{key:'Test',value:'3.1415'}, {key:'Test2',value:'2.1878'}]
      - each item in jadeItems
        tr
          td= item.key
          td= item.value

これは静的データに対して機能するため、動的にする必要があります。JSON 形式のテーブルの新しい値を含む SocketStream メッセージを受信するクライアント側の CoffeeScript があります。

app.coffee:

SS.events.on('message', (message) ->
  jadeItems = JSON.parse(message)
)

Jade の項目の JSON 値をメッセージの内容に置き換える方法を見つけようとしていますが、'jadeItems' 変数はクライアント側の CoffeeScript の範囲外です。

新しい JSON を Jade 要素に詰め込むことはできますが、Jade 内の「jadeItems」変数で要素の値を取得する方法がわかりません。

Jade要素の値を取得するためのJade構文を知っている人はいますか? または、クライアント側の CoffeeScript 内から Jade で定義された items 変数に割り当てる方法はありますか? Jade 構文の確実なリファレンスはありますか?

4

1 に答える 1

2

Jade をクライアント側のテンプレート ライブラリとして使用していると仮定します (これはまれですが、可能です)。

Jade だけで Ajax の更新を行うには、テンプレートを再レンダリングする必要があります。あなたは次のようなことをしているに違いありません（ここのドキュメントの例を使用して）

fn = jade.compile template, options
fn locals

あなたがすべきことは、そのオブジェクトjadeItemsのプロパティを作成することです。localsだから行の代わりに

- var jadeItems = [{key:'Test',value:'3.1415'}, {key:'Test2',value:'2.1878'}]

テンプレートでは、代わりに Jade render 関数を次のように呼び出します。

locals = {jadeItems: [{key:'Test',value:'3.1415'}, {key:'Test2',value:'2.1878'}]}
fn locals

次に、Ajax 関数で次のように記述します。

locals.jadeItems = JSON.parse message
fn locals

テンプレートを新しいデータで再レンダリングします。

更新:質問に対するコメントの明確化を考えると、より直接的な答えは次のとおりです。「jQuery を使用して、Ajax コールバックから DOM を操作するだけです。」それは次のように見えるかもしれません

SS.events.on 'message', (message) ->
  items = JSON.parse message
  html = ''
  for item in items
    html += "<tr><td>#{item.key}</td><td>#{item.value}</td></tr>"
  $('tbody').html html

（上記は、サーバーの応答がサニタイズされ、適切にフォーマットされていることを前提としていることに注意してください）。

于 2011-11-03T15:07:04.433 に答える