Шаблон Vue.js в .jinja для проекта Pyramid - PullRequest
Новая
       22

Шаблон Vue.js в .jinja для проекта Pyramid

0 голосов
/ 02 октября 2018

Я хочу использовать vue.js в моем шаблоне .jinja для проекта Pyramid, но не могу.Если я правильно понимаю, vue.js работает только на .html файлах.Что я должен сделать?

signin.jinja2 

<body>
<div id="id">
    <p> {{ title }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="../static/js/main.js"></script>

main.js 

new Vue({
el: '#id',
data: {
    title: "hello world"
}})

signin.py 

@view_config(route_name='signin', renderer='../templates/signin.jinja2')
def sign_in(request):
return{}

Этот код ничего не возвращает на моей странице.

UPD: я думаю, что нашел решение здесь , но я не понимаю, как оно работает.Нужны советы

1 Ответ

0 голосов
/ 02 октября 2018

Важно понимать, что и где происходит - ваше приложение Pyramid в основном представляет собой программу, которая получает текстовый BLOB-объект в качестве входного (запрос) и возвращает другой текстовый BLOB-объект в качестве выходного (ответ).Полученный браузером текстовый BLOB-ответ интерпретируется, в данном случае, как HTML-страница со всеми ее тегами сценария и т. Д. Затем браузер выполняет JavaScript, который имеет доступ только к DOM, сгенерированному из этого HTML-объекта.Тот факт, что ваше приложение Pyramid использовало шаблон Jinja2 для генерации этого BLOB-объекта, в данный момент не имеет значения.

Так что теперь вы можете видеть, что «vue.js в шаблоне jinja2» на самом деле никогда не происходит - это всегда «vue.js in HTML ", и единственное, что вам нужно, это убедиться, что ваше приложение выводит правильный HTML.

Это может быть немного проблематично в данном конкретном случае, потому что и jinja2, и vue.js используют {{...}} в качестве синтаксиса текстовой интерполяции.Если вы посмотрите исходный код страницы в своем браузере, то увидите, что бит {{ title }} обработан Jinja2, а vue.js его никогда не увидит.Вы в основном генерируете один шаблон из другого шаблона с похожим синтаксисом.

Я не очень знаком с Jinja2 или vue.js, но я бы попробовал следующее:

  • Подумайте об изменении библиотеки шаблонов на что-то, синтаксис которого не конфликтует с vue.js.Может быть, TAL или Mako.

  • Если вы хотите продолжать использовать Jinja2, вам понадобится какая-то функция, которая выводит разметку Vue.js из шаблона Jinja: 

    def vue_markup(s):
    return '{{ ' + s + ' }}'

    , который вы бы использовали в своем шаблоне следующим образом: 

    {{ vue_markup('title') }}
...