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

这适用于静态数据，现在我需要使其成为动态数据。我有客户端 CoffeeScript，它接收 SocketStream 消息，其中包含 JSON 格式的表的新值：

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 渲染函数

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 回答