Шаблоны на стороне клиента + на стороне сервера, мне кажется, что это неправильно, как оптимизировать?

Это очень просто использовать шаблоны на стороне клиента + на стороне сервера. Когда мы создаем некоторые веб-приложения, мы должны использовать ajax для получения некоторых данных и использовать функцию обратного вызова для работы с ними. Таким образом, мы должны отображать эти данные на стороне клиента.

Вопрос в том, как отобразить их на стороне клиента?

Теперь нам просто нужен jade.js на стороне клиента.

Следуйте этому документу: https://github.com/visionmedia/jade#readme

Первый

git clone https://github.com/visionmedia/jade.git

Второй

$ make jade.js ( in fact the project has already compile the file for us )

so we just need to copy this file to the path that we use.

Третий

read my demo below :

<script type='text/javascript' language='javascript' src="lib/jquery-1.8.2.min.js"></script>
<script type='text/javascript' language='javascript' src="lib/jade/jade.js"></script>
<script type='template' id='test'>
ul
  li hello world 
  li #{item}
  li #{item}
  li #{item}
</script>
<script>
  var compileText = $("#test").text();
  console.log( typeof( compileText ) );
  var fn = jade.compile( compileText , { layout : false } );
  var out = fn( {item : "this is item " } );
  console.log( out );
  $("body").append( out );
</script>

Теперь вы можете увидеть результат вывода в теле

hello world
this is item
this is item
this is item

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

Возможно, теперь у вас возникнет другой вопрос. Как написать некоторые коды нефритовых шаблонов в *.jade? Этот документ также предоставляет нам способ сделать это. Это руководство может вам помочь.

index.jade

!!!5
html
  head
   title hello world
  body
    ul#list

    script#list-template(type='template')
      |- for( var i in data )
      |    li(class='list') \#{ data[i].name }
      |- }

index.js

/* you javascript code */
var compileText = $('#list-template').text();
var compile = jade.compile( compileText , { layout : false } );

var data = [{ "name" : "Ben" } , {"name" : "Jack" } , {"name" : "Rose" }];
var outputText = compile( data );

$("#list").append( outputText );

Используйте механизм шаблонов http://github.com/flatiron/plates, который будет работать как на стороне клиента, так и серверная сторона.

Несколько недель назад я написал пакет npm для шаблонов Handlebars, чтобы делиться ими между клиентом и сервером. Это довольно просто, но до сих пор это работало очень хорошо для меня:

https://github.com/jwietelmann/node-handlebars-precompiler

Изменить: я отдельно использую "hbs" в качестве пакета для рендеринга на стороне сервера. Прекомпилятор просто доставляет предварительно скомпилированные шаблоны в мой общедоступный каталог javascripts всякий раз, когда я обновляю свои представления hbs.