如何从客户端 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 更新，您必须重新呈现模板。你必须做类似的事情（使用文档这里的示例）

fn = jade.compile template, options
fn locals

你应该做的是制作 < code>jadeItems 该 locals 对象的属性。 使用该行

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

因此，您无需在模板中

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

，而是使用Ajax 函数中的 Then 调用 Jade 渲染函数，并编写代码

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

（请注意，上面假设服务器响应已清理且格式良好）。