Использование клиентских шаблонов в Sails.js

Question

Я новичок в Sails.js

Я пытаюсь использовать assets/templates Функция в паруса для визуализации данных на стороне клиента, но я не могу найти ни одного рабочего примера.

Я ищу нативное решение Sails, без угловых или других рамок. Просто загрузить .JST шаблоны из assets/templates и заполнить их с помощью jQuery

Может ли кто-нибудь ссылаться на рабочий пример использования шаблонов на стороне клиента в sails.js?

Answer 1

Документация действительно отсутствует с этим. Однако мне удалось заставить клиентские шаблоны работать в Sails 0.12.4, выполнив следующие действия:

1. Предпосылки

При установке по умолчанию у вас уже должен быть файл views/homepage.ejs с разделом для шаблонов:

...
<!--TEMPLATES-->
<!--TEMPLATES END-->
...

Теперь, запустив $ sails liftШаблоны под assets/templates/ скомпилированы в файл JavaScript jst.js который затем автоматически вставляется в views/homepage.ejs между тегами комментария раздела шаблона. Однако сначала нам нужен шаблон!

2. Шаблон EJS

Напишите файл шаблона, скажем assets/templates/example.ejs:

<h1><%= message %></h1>

Есть одна проблема. По умолчанию Sails компилирует только шаблоны, оканчивающиеся на *.html, Это не имеет смысла, потому что файл шаблона явно не HTML, а также потому, что серверные шаблоны под views/ уже есть расширение .ejs, Чтобы изменить это, замените следующие строки в tasks/pipeline.js:

var templateFilesToInject = [
  'templates/**/*.html'
];

с

var templateFilesToInject = [
  'templates/**/*.ejs'
];

Это позволяет нашему example.ejs быть составленным в jst.js как функция JavaScript.

3. Определите _

Этого недостаточно. Скомпилированный JavaScript в jst.js зависит от Underscore или Lodash. Без _ в пространстве имен клиента выполнение функции шаблона вызовет ошибку.

Чтобы импортировать это на стороне клиента, загрузите выбранную версию и поместите ее в assets/js/dependencies/, Например, минимизированное ядро ​​Lodash кажется достаточным. Во время следующего sails liftновый тег сценария для файла будет автоматически вставлен в homepage.ejsв конечном итоге положить _ в пространство имен.

4. Рендеринг шаблона

Бежать $ sails lift и перейдите на домашнюю страницу по адресу http://localhost:1337/ по умолчанию. jst.js создал функцию шаблона в window.JST['assets/templates/example.ejs'],

Чтобы проверить его в действии, откройте консоль разработчика и введите:

> window.JST['assets/templates/example.ejs']({message: 'Hello'})

Это должно вернуть вам строку <h1>Hello</h1>, Эту строку вы сейчас хотите вставить куда-нибудь в документ. Допустим, вы храните его в переменной piece, Вы могли бы использовать JQuery $('#target').html(piece) или старый добрый document.getElementById('target').innerHTML = piece, В любом случае, как результат, отображаемая строка теперь вставляется на страницу в элементе #target.

Answer 2

Вы определили ng-app и ng-view в layout.ejs? Если вы определите, а затем создадите угловой app.js в /assets с маршрутизацией, то это определенно сработает. Если все еще какие-либо проблемы, пожалуйста, дайте мне знать.