python - Pyramid 项目的 .jinja 模板中的 Vue.js

标签 python vue.js jinja2 pyramid

我想在我的 Pyramid 项目的 .jinja 模板中使用 vue.js,但我不能。 如果我理解正确,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>

主要.js

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

登录.py

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

此代码在我的页面上不返回任何内容。


UPD:我认为我找到了决定 here ,但我不明白它是如何工作的。需要一些提示

最佳答案

重要的是要了解在哪里发生了什么——您的 Pyramid 应用程序基本上是一个程序,它获取一个文本 blob 作为其输入(请求)并返回另一个文本 blob 作为其输出(响应)。当浏览器接收到响应文本 blob 时,在这种情况下,将其解释为 HTML 页面及其所有脚本标记等。然后浏览器执行只能访问从该 HTML blob 生成的 DOM 的 javascript。您的 Pyramid 应用程序使用 Jinja2 模板生成该 blob 的事实在此时无关紧要。

现在您可以看到“jinja2 模板中的 vue.js”实际上从未发生过 - 它始终是“HTML 中的 vue.js”,您唯一需要做的就是确保您的应用程序输出正确的 HTML。

在这种特殊情况下这可能有点问题,因为 jinja2 和 vue.js 都使用 {{...}} 作为文本插值语法。如果您在浏览器中查看页面源代码,您会看到 {{ title }} 位已由 Jinja2 处理,而 vue.js 永远看不到它。您基本上是从具有类似语法的另一个模板生成一个模板。

我对 Jinja2 或 vue.js 都不太熟悉,但我会尝试以下操作:

  • 考虑将模板库更改为语法不与 vue.js 冲突的内容。也许是 TAL 或 Mako。

  • 如果您想继续使用 Jinja2,您需要某种函数来从 Jinja 模板输出 Vue.js 标记:

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

    你会像这样在你的模板中使用它:

    {{ vue_markup('title') }}
    

关于python - Pyramid 项目的 .jinja 模板中的 Vue.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52599124/

相关文章:

python - jinja2 或 html 文本区域的简单标记

python - Jinja2 {% include file %} 在搜索路径之外不起作用

python dns.resolver 获取DNS记录类型

python - 序列化公钥时为"Could not deserialize key data"

python - IPython 笔记本 : Count number of cells in notebook

python - 使用自定义分类器通过 GridSearchCV 和 OneVsRestClassifier 进行多标签分类

Vue.js 路由器 View 挂载回调

javascript - 传单搜索 - 无法读取未定义的属性 'properties'

javascript - Vue - 如何根据外部控制动态激活 <b-tab>

eclipse - Eclipse 中的 Jinja2 模板支持