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，它接收包含JSON格式表的新值的SocketStream消息：

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这里的例子）

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

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

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

1 个答案: