webpack + vue + jinjia

busy

12813241

发布于
2016-11-30

我用了webpack + vue框架，怎么处理后端传过来的jinja，请指教

web webpack vue.js jinja2

阅读 4.8k

6 个回答

得票最新

lins

发布于
2018-07-10

新手上路，请多包涵

把vue模版的{{}}重新定义成${}

千泓

30061521

发布于
2016-12-01

jinjia是什么鬼

eternalshallow

224312

发布于
2016-12-01

jinja是什么意思

卡修的莫莫

发布于
2016-12-01

更新于
2016-12-01

新手上路，请多包涵

楼上的几个无知可以也要有个限度不懂自己去谷歌这么有名的模版都不知道还出来秀真是活久见

觉迟

发布于
2021-05-25

新手上路，请多包涵

jinja2是在服务端渲染的，webpack+vue生成的js是在客户端运行的，应该没办法直接在js里面处理jinja2的表达式，因为此时的网页已经没有这个表达式了。非要结合的话，我觉得倒是可以考虑后端通过jinja2生成dom后，vue再来处理这段dom

贾德诺

168137

发布于
2017-03-13

更新于
2017-03-13

楼主是想vue和jinja2混合起来使用用吗？，vue我倒没用过。我之前项目用的knockoutjs + jinja2 + flask。不过都是MVVM框架，思路应该都应该差不多吧。我是通过把数据用tojson这个filter把数据直接写在页面里，然后客户端再执行绑定数据的js函数比如:
view.py

data = [{'title': 'book1'}, {'title': 'book2'}]
return render_template('index.html', data=data)

index.html:

<html> 
<body> 
    <div>
    <!-- ko foreach: books -->
    <a data-bind="value: title"></a>
    <!-- /ko -->
   </div>
</body>

<script>

$(function test() {
    // jinja2 将数据写在函数内
    var data = {{ data | tojson }};
    var books = ko.obserableArray();
    
    data.forEach(function(book){
        books.push({'title': ko.observable(data['title'])})
    });
    ko.applyBindings({
        books: books
    });
});

</script>
</html>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

webpack + vue + jinjia

你尚未登录，登录后可以

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

vue2.6，打包后app.js，8M,chunk.js，6M，加载打开页面很慢，有什么办法减少，打开页面快一些？

Element Plus表格组件如何呈现复杂布局如图？

多个vue项目，后台接口都是一样的，每个vue项目的同一个页面都只是一小部分修改，怎样把公共的代码提出来复用？

如何实现从一个div中拖拽dom到另一个div容器？

electron如何屏蔽鼠标上的前进后退快捷键？