Обмен информацией о компоновке между Jade и Javascript

Question

У меня есть сайт на базе Node.js / Jade, и я пытаюсь добавить интерактивности с помощью простых кусочков Javascript.

В частности, я пытаюсь настроить кнопку, которая добавляет новую строку в таблицу. Визуализация таблицы в настоящее время выполняется в Jade, и я планирую использовать JQuery для настройки обратного вызова для добавления строки.

Мой шаблон выглядит примерно так:

tbody#my_body
  - each foo in foos
    tr
      td= foo.blah
      td= foo.hello
      td
        a( ... complex link stuff etc. )

И я думаю, что мой обратный вызов JS будет

$("a#add_row").click(function(){
  $("#my_body").append( ??? );
});

Я мог бы переписать весь материал макета в HTML в теле append, но это выглядит глупо. Каждый раз, когда я меняю одну, мне приходится менять другую.

Есть ли способ поделиться кодом макета между шаблоном Jade и Javascript?

Answer 1

Итак ... Я не думаю, что полностью понимаю, что вы спрашиваете. Вы хотите, чтобы таблица была статичной между сеансами или только в контексте одного сеанса или обновления?

Если это последнее, тогда вы просто добавляете строку таблицы через jquery, как если бы вы были сайтом с полным HTML. К тому времени, когда вы вызываете функцию jquery, экспресс уже преобразовал шаблоны jade в полноценный html.

Если вы хотите, чтобы эта строка сохранялась, то вам нужно включить вызов на сервер, который добавляет данные этой новой строки в вашу коллекцию данных для foo, тогда всякий раз, когда страница отрисовывается снова, сервер передает foo обратно со всеми предыдущими строками. + тот, который вы только что добавили.

Answer 2

Я имею в виду, у вас есть доступ к переменным на стороне сервера, когда вы пишете представление.Вы также можете сделать дамп своих моделей / переменных в json и использовать его.Наконец, вы можете посмотреть на Backbone.js и повторно использовать те же модели на клиенте / сервере.Смотрите этот пост .