如何從客戶端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元素？

回答

相關問題