如何从客户端 CoffeeScript 动态更新 Jade 元素？

Question

我正在尝试使用 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 语法是否有可靠的参考资料？

Answer 1

假设您使用 Jade 作为客户端模板库（这种情况很少见，但可能）：

为了完全通过 Jade 进行 Ajax 更新，您必须重新渲染模板。你一定在做类似的事情（使用the docs here的例子）

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

使用新数据重新渲染您的模板。

更新：鉴于 cmets 对此问题的澄清，更直接的答案是：“只需使用 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

（请注意，以上假设服务器响应经过清理且格式正确）。