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

我想动态更新使用SocketStream的值的表。我有一个玉模板定义表：如何从客户端CoffeeScript动态更新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) 
)

我试图找出如何更换JSON Jade中项目的值与消息的内容，但'jadeItems'变量超出了客户端CoffeeScript的范围。

我能塞住新的JSON成玉元素，但后来我不确定如何让中玉“jadeItems”变量元素的值。

有谁知道获取Jade元素的值的Jade语法吗？或者有没有办法从客户端的CoffeeScript中分配给Jade中定义的items变量？ Jade语法有没有可靠的参考？

来源

2011-11-03 retrodrone

澄清：您使用玉的客户端？ –

哦好问题。也许不会？它由默认情况下的Views目录中的SocketStream创建。我认为它是按原样提供给客户的，但也许我错了。我对所有这些东西都很陌生，但对我所看到的感到兴奋。也许我可以从服务器端的CoffeeScript更新它。 – retrodrone

是的，我不认为SocketStream做翡翠默认客户端。[主页]（https://github.com/socketstream/socketstream）表示“*初始*发送到浏览器的HTML可以用Jade或纯HTML编写”（重点是我的）;和[本页]（https://github.com/socketstream/socketstream/blob/master/doc/guide/en/developing/client-side_templates.md）建议使用jQuery而不是Jade来执行完全类似的Ajax你正在描述的更新。该页面甚至回答了“为什么不用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'}]

，你就应该改为调用与

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-03 15:07:04

你真的用这个保存了我的培根。现在我会去了解它是如何工作的。谢谢！ – retrodrone

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

回答

相关问题