Переменные, глобальные объекты и console.log в нефрите

Question

Я создал приложение с экспресс-фреймворком, которое поставляется с jade в качестве движка шаблонов. Играя с нефритом, я настроил простой тест:

В Node я передаю объект в шаблон Jade при рендере res.render('index', { title: 'Express', docs:"is jade cool?"});и в шаблоне я пытаюсь вызвать значения следующим образом:

  h1= title
  p Hi!
  p Welcome to #{title}
  p #{docs}
   - console.log(docs)

  script(type='text/javascript').

   console.log(docs);

Я обнаружил, что не могу консоль записать в журнал значения глобального объекта, и если я попытаюсь #{docs}, он пытается проанализировать его как буквальную команду, а не строку, с которой он начал. Я также обнаружил, что не могу назначить его JS-переменной, например: var test = #{docs};,

Может кто-нибудь объяснить:

• В чем разница между #{docs}, !{docs} а также docs? (Как ни странно, все три примера используются в документации, но ни один из них не объяснен).
• Как правильно вести консольный журнал свойств глобального объекта, передаваемых в jade из Node, и как правильно назначать эти же свойства локальным переменным JS?

Answer 1

В чем разница между #{docs},!{docs} и docs (как ни странно, все три примера используются в документации, но ни один из них не объяснен)

//This will output literal HTML <p>docs</p>
p docs

Пример командной строки:

echo "p docs" | jade
<p>docs</p>

---

//This will interpolate the variable docs into a string
//and also escape any HTML it may contain: <p>is jade cool?</p>
//To see what I mean, try passing docs: "jade is <b>cool</b>" (contains HTML)
//you'll get <p>jade is &lt;b&gt;cool&lt;/b&gt;</p>
p #{docs}

//This syntax is another flavor of the above
p= docs

Пример командной строки:

echo 'p #{docs}'  | jade --obj '{docs: "jade is <b>cool</b>"}'
<p>jade is &lt;b&gt;cool&lt;/b&gt;</p>

echo 'p= docs'  | jade --obj '{docs: "jade is <b>cool</b>"}'
<p>jade is &lt;b&gt;cool&lt;/b&gt;</p>

---

//This will do the same but NOT escape HTML
//The exclamation point is supposed to convey warning
//because this can be a XSS vulnerability
p !{docs}

Пример командной строки:

echo 'p !{docs}'  | jade --obj '{docs: "jade is <b>cool</b>"}'
<p>jade is <b>cool</b></p>

echo 'p!= docs'  | jade --obj '{docs: "jade is <b>cool</b>"}'
<p>jade is <b>cool</b></p>

---

Как правильно вести консольный журнал свойств глобального объекта, переданных в нефрит от узла, и как правильно назначить те же свойства локальным переменным js

Это очень распространенное желание, и наивный / неуверенный ответ выглядит примерно так:

script(type="text/javascript")!= "var myData = " + JSON.stringify(myData)

Который я могу проверить через

jade --obj '{myData: {foo: "FOO"}}' < t1.jade

и получить

<script type="text/javascript">var myData = {"foo":"FOO"}</script>

Однако правила безопасного встраивания данных JSON в документ HTML хитры ( подробности здесь), поэтому я настоятельно рекомендую использовать вспомогательный модуль, такой как sharify, который обеспечит безопасную передачу данных в HTML.