Рендеринг шаблона с помощью node.js и backbone.js

Ответ 1

В настоящее время я работаю над инфраструктурой с именем onecode, которая делает то, что вы просили. В настоящее время у него нет документации, но у меня есть рабочий проект, основанный на нем, поэтому он может работать и на вас. Я также ищу участников.

Вот как это работает. Почти весь код распределяется между клиентом и сервером, включая модели и представления.

• На сервере вы создаете REST API, где вы определяете бизнес-правила, безопасность, операции db, все, что вы не можете доверять клиенту.
• Этот API используется как от клиентов (с использованием стандартных вызовов Backbone Ajax), так и от самого сервера, когда страница сначала запрашивается (напрямую, используя переопределенный метод $.ajax).
• Когда клиент запрашивает страницу, сервер создает все необходимые модели и представления, делает прямые запросы к API и визуализирует HTML. Кроме того, он запоминает все данные, полученные из вызовов API, и какие элементы HTML соответствуют тем представлениям.
• Код модели/вида, HTML и данные предоставляются клиенту. Здесь HTML полностью отображается и работает, поэтому даже если пользователь отключил JavaScript, он может щелкнуть ссылки и просмотреть веб-сайт (конечно, он не получит никаких динамических функций). Но, если Javascript включен, все модели и представления воссоздаются и повторно привязываются к узлам DOM автоматически в фоновом режиме, не заставляя пользователя ждать.
• После этого приложение работает как одностраничное приложение, запрашивающее только данные (json) из того же API, создавая шаблоны на клиенте.

Это означает, что:

• Вы пишете презентацию и динамический код только один раз.
• Первая запрошенная страница обслуживается и отображается пользователю молниеносно, не требует, чтобы все сценарии загружались и запускались, просто HTML/CSS.
• Следующие страницы также очень быстрые, потому что запрашиваются только сырые данные, шаблоны отображаются на клиенте. Вы также можете сделать его визуально привлекательным, а не обычным перезагрузкой страницы. Вы даже можете воспроизводить музыку, пока пользователь просматривает веб-сайт.
• Поисковые системы и социальные сети любят вас.

Архитектура создает некоторые разумные требования, которые сделают вас лучшим разработчиком. Что-то вроде:

• Отдельный, четко определенный API, необходимый для действий сервера и бизнес-правил.
• Нет глобальных переменных.
• Представления обрабатываются более строго, чем в общем случае Backbone, более похожими на составные компоненты пользовательского интерфейса.
• Четкое разделение между рендерингом HTML и динамическим поведением.

Очень простой пример можно найти в исходном дереве. Я использую Backbone в качестве основы для моделей и представлений, а Browserify доставляет пакет js клиенту.

В моем проекте я использую встроенные шаблоны с EJS в качестве шаблонов. Это имеет преимущество хранения HTML и кода (я использую CoffeeScript) в одном и том же месте. Но структура способна упаковывать шаблоны из внешних файлов, с другими шаблонами таких движков, как Jade. Пожалуйста, посмотрите пример templating о том, как это можно сделать.

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

Ответ 2

Я не использовал его для node, но я использовал усы довольно широко для backbone.js и был доволен результатами, и у него есть порт для использования с node.

http://mustache.github.com/

Ответ 3

С точки зрения выбора языка шаблона вы можете в значительной степени выбрать свой язык с использованием шаблонов шаблонов js, включая Шаблоны подделок, Mustache или Handlebars - это тривиально для настройки шаблоны в общедоступном пути, которые ваше приложение Node.js также читает, когда содержимое создается на стороне сервера.

Мой личный фаворит Jade, который выходит из коробки с Express - он обеспечивает очень упрощенный, выразительный стиль кодирования.

Вы можете найти хорошую статью о том, как связать Backbone.js и Express здесь (используя Jade в качестве языка шаблона).

Большинство примеров, как правило, заключается в том, как настроить приложение RESTful, которое отображает полностью клиентскую сторону (и это не то, что вам действительно нужно).

Однако, если вы получаете рендеринг веб-приложений в Express из шаблонов в общедоступной папке (я бы рекомендовал хранить отдельные разделы - предварительно обработать ваши шаблоны и передать html вашим представлениям, чтобы вы сохраняли конкретные шаблоны) Также вы можете загрузить их из Backbone.js и обработать изменения с помощью стека истории Backbone.js.

Ответ 4

Вы можете использовать JSDOM, чтобы сделать вашу страницу node.js следующим образом

// specify a catch all route
app.get('/namespace/*', function (req, res, next) {
  // load the dom
  jsdom.env({
    html: html,
    src: src,
    features: {
      FetchExternalResources: false,
      ProcessExternalResources: false 
    },
    done: function (err, window) {
      // overwrite Backbone sync method with a server-side one
      window.Backbone.sync = sync
      window.$(function () {
        window.Backbone.history.start({ silent: true })

        // load requested url
        var matched = window.Backbone.history.loadUrl(req.originalUrl.substr(1))
        if (matched) // if matched: return resulting html
          res.end(window.document.innerHTML)
        else
          next()
      })
    }
  })
})

Для этого вам также необходимо указать следующие переменные

var sync = function(method, model, options, error) {
  // your server side sync method
}

var html = fs.readFileSync(path.join(__dirname, 'views/index.htm'), 'utf-8')
var src = [
  fs.readFileSync(path.join(__dirname, 'public/javascripts/jquery.js'), 'utf-8'),
  fs.readFileSync(path.join(__dirname, 'public/javascripts/underscore.js'), 'utf-8'),
  fs.readFileSync(path.join(__dirname, 'public/javascripts/backbone.js'), 'utf-8'),
  fs.readFileSync(path.join(__dirname, 'public/javascripts/your-backbone-stuff.js'), 'utf-8')
]

К сожалению, я не нашел решения для дублирования созданного объекта window/document для повторного использования.

Также эти растворы пригодны только для, например, потому что ему не хватает сопоставления на стороне клиента из Backbone Views и соответствующих узлов DOM.

Ответ 5

Попробуйте https://github.com/flatiron/plates

Отлично работает в обеих средах, не имеет DSL и имеет чистый API

Ответ 6

Попробуйте jsrender в https://github.com/BorisMoore/jsrender.

Это переписывается из jQuery tmpl и НЕ требует jQuery или любого DOM. Он является самодостаточным в одном файле, и автор сохраняет его очень свежим.

jsrender - это механизм замены строки для шаблонов. Мы используем его как для динамической, так и для статической страницы в NodeJS. Мы также используем его для не-HTML-шаблонов, например. XML, CSV и текстовую электронную почту. Хотя он еще не в режиме производства, мы использовали его в течение нескольких месяцев, и разработка пока очень стабильна.

Посмотрите на некоторые интересные демонстрации в http://borismoore.github.com/jsrender/demos/demos.html.

В самом простом, вы можете сделать цикл foreach. Но если вы идете экспертным путем или будете предприимчивы, вы можете запустить JS-код (либо встроенный, либо переданный как функция, помощники a.k.a.). Конечно, плохо иметь код внутри слоя презентации, но иногда это не мешает иметь простые вычисления odd()/even() или nth + 1 на вашем любимом языке. Просто убедитесь, что вы хорошо понимаете слои и рискуете.

Ответ 7

Node.js с шаблоном nunjucks работает хорошо для меня, потому что мне нужен шаблон без XML для веб-контента без SGML (nunjucks позволяет устанавливать разделители шаблонов в текстовых шаблонах - это случай с jinja2 для Python, на котором nunjucks - это re-eng)

Ответ 8

Вот очень простой пример рендеринга шаблона поддерева/рамки в NodeJS. Я установил Underscore с помощью NPM.

var http = require('http'),
    _ = require('underscore');

http.createServer(function (req, res) {
    var template = "<h1><%=message%></h1>"
    res.end(_.template( template, {message: "Hello world"}));
}).listen(8080, 'localhost');

Ответ 9

Я пробовал множество решений, и http://ezeljs.com/, безусловно, самый простой и простой в использовании. Это имеет смысл.

Шаблон для проектов Backbone, которые совместно используют сервер/клиент кода, отображают сервер/клиент и масштабируются через модульную архитектуру.

Использует шаблоны Jade для сервера и клиента. Обозреватель и использование преобразования Jade, безусловно, является моим предпочтительным методом для обмена шаблонами как на клиенте, так и на сервере.