Как динамически обновить элемент Jade из CoffeeScript на стороне клиента? - PullRequest
Новая
       34

Как динамически обновить элемент Jade из CoffeeScript на стороне клиента?

1 голос
/ 03 ноября 2011

Я пытаюсь динамически обновить таблицу значений с помощью 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)
)

Я пытаюсьчтобы выяснить, как заменить значение JSON элементов в Jade содержимым сообщения, но переменная 'jadeItems' выходит за рамки клиентского CoffeeScript.

Я могу вставить новый JSON в элемент Jade, но потом я не уверен, как получить значения для элемента в переменной jadeItems в Jade.

Кто-нибудь знает синтаксис Jade для получения значения элемента Jade?Или есть способ присвоения переменной items, определенной в Jade, внутри CoffeeScript на стороне клиента?Есть ли надежные ссылки на синтаксис Jade?

1 Ответ

2 голосов
/ 03 ноября 2011

Предполагается, что вы используете Jade в качестве библиотеки шаблонов на стороне клиента (что встречается редко, но возможно):

Для того, чтобы обновить Ajax исключительно через Jade, вам нужно будет повторно обработать шаблон. Вы, должно быть, делаете что-то вроде (используя пример из документа здесь) 

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 для манипулирования DOM из обратного вызова Ajax». Это может выглядеть примерно так: 

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

(обратите внимание, что вышеизложенное предполагает, что ответ сервера очищен и хорошо отформатирован).

...