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

Я пытаюсь динамически обновлять таблицу значений с помощью 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? Или есть способ назначить переменную элементов, определенную в Jade, из клиентского CoffeeScript? Есть ли надежные ссылки на синтаксис Jade?


coffeescript publish-subscribe pug socketstream
person retrodrone    schedule 03.11.2011    source источник
comment
Чтобы уточнить: вы используете клиентскую часть Jade?   -  person Trevor Burnham    schedule 03.11.2011
comment
О, хороший вопрос. Возможно, нет? По умолчанию он создается SocketStream в каталоге Views. Я предполагаю, что это подается клиенту как есть, но, возможно, я ошибаюсь. Я новичок во всем этом, но взволнован тем, что я вижу. Может быть, я смогу обновить его с сервера CoffeeScript.   -  person retrodrone    schedule 03.11.2011
comment
Да, я не думаю, что SocketStream по умолчанию использует Jade на стороне клиента. На главной странице указано, что начальный HTML-код, отправляемый в браузер, может быть написан на Jade. или обычный HTML (выделено мной); и эта страница предлагает используя jQuery, а не Jade, для выполнения именно такого обновления Ajax, которое вы описываете. Эта страница даже отвечает на вопрос, почему бы не делать все шаблоны с помощью Jade?   -  person Trevor Burnham    schedule 03.11.2011
comment
Круто спасибо за ссылки. Я мчался слишком быстро, и мне нужно больше читать. Но ваш ответ ниже мне очень помог. Большое спасибо!   -  person retrodrone    schedule 03.11.2011

Ответы (1)


arrow_upward
2
arrow_downward

Предполагая, что вы используете 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

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

person Trevor Burnham    schedule 03.11.2011
comment
Вы действительно спасли мой бекон этим. Сейчас пойду изучать, как это работает. Спасибо! - person retrodrone; 03.11.2011