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

Question

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

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

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

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

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

2 3

jquery jquery-templates sails.js

2 ответа:

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

-1

Akseli Palén · Accepted Answer · 2016-09-02 23:51:27

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

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

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


...
Теперь, запустив $ 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 зависит от подчеркивания или альтернативно Lodash. Без _ в пространстве имен клиента выполнение функции шаблона вызовет ошибку.

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

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

Запустите $ sails lift и перейдите на главную страницу по адресу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) или good old document.getElementById('target').innerHTML = piece. В любом случае, в результате, отрисованная строка теперь вставляется на страницу под элементом # target.