Django模板变量如何传递给外部js调用的方法小结

前言

因为工作的需要，最近一直在思考如何更好的组织Django中的静态资源，比如JS、CSS一类，如何结合前端构建工具写出更好的代码以及结构呢？下面这篇文章就给大家详细介绍了实现的方法，话不多说，来一起看看详细的介绍：

方法如下：

首先需要解决的一个问题就是某些时候需要把JS代码写在模板里来获取后台传递过来的变量，比如：

<div>
<h1>Test</h1>
<div id="my-test" ></div>
</div>
<script>
$(function(){
 $('#my-test').html("{{ some_var_from_view }}")
});
</script>

这么写代码的话，别扭不说，前端的那些构建工具比如webpack，gulp的使用范围也将大大降低。

首先说结论，想完全剥离JS和模板而又需要使用模板渲染的数据，我是没想到什么好办法。如果读者有好办法希望赐教。
既然不能完全剥离，那么就进最大的努力分离JS所需的数据和代码吧。

既然需要模板渲染数据给JS使用，最先想到的办法就是把数据渲染到HTML代码中并隐藏。这种方法的优点就在于简单，甚至模板中都可以完全不使用<script></script>标签。缺点则是会渲染出很多的隐藏字段，JS中要写大量的getElementsByxxxx一类的代码来获取数据。

既然如此，那么使用一种折中的办法，在HTML中使用<script></script>标签将后台传递的数据渲染成JS对象，然后JS代码中则可以直接使用这个对象了。

比如模板中：

<script>
var MyViewVar = {
 var_1: {{ var_1 }},
 var_2: {{ var_2 }},
};
</script>
...
<script type="text/javascript" src="/js/test_script.js"></script>

使用这种方式需要注意一点就是尽量先写渲染JS变量的代码，比如写在head中，然后再引入外部JS文件。这样，在test_script.js中就可以直接使用MyViewVar这个对象了。

当然了，既然现在流行SPA（Single Page Application）网站，那么django作为后端仅提供JSON数据也是一种办法，不过这样比较考验前端人员的能力了。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • 解决Django模板无法使用perms变量问题的方法

    解决Django模板无法使用perms变量问题的方法

    前言 本文主要给大家介绍了关于Django模板无法使用perms变量的解决方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 解决方法: 首先,在使用Django内置权限管理系统时,settings.py文件要添加 INSTALLED_APPS添加: 'django.contrib.auth', MIDDLEWARE添加: 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.au

  • Django模板变量如何传递给外部js调用的方法小结

    前言 因为工作的需要,最近一直在思考如何更好的组织Django中的静态资源,比如JS.CSS一类,如何结合前端构建工具写出更好的代码以及结构呢?下面这篇文章就给大家详细介绍了实现的方法,话不多说,来一起看看详细的介绍: 方法如下: 首先需要解决的一个问题就是某些时候需要把JS代码写在模板里来获取后台传递过来的变量,比如: <div> <h1>Test</h1> <div id="my-test" ></div> </di

  • Python中实现变量赋值传递时的引用和拷贝方法

    iamlaosong文 曾经看到这样一个问题,一个字典中的元素是列表,将这个列表元素赋值给一个变量,然后修改这个列表中元素的值,结果发现,字典中那个列表也同样修改了. 那个问题如下: dict = {'a':[1,2,3,4,5],'b':2} x = dict['a'] for i in range(5): x[i] = 0 print(dict['a']) 程序运行结果如下: [0, 0, 0, 0, 0] 这儿涉及到Python赋值到底是引用还是拷贝一份的问题,即赋值时是传值还是传址.上面

  • 浅谈AjaxPro.dll,asp.net 前台js调用后台方法

    1.什么是Ajax Ajax是异步Javascript和XML(Asynchronous JavaScript and XML)的英文缩写."Ajax"这个名词的发明人是Jesse James Garrett,而大力推广并且使Ajax技术炙手可热的是Google.Ajax的核心理念在于使用XMLHttpRequest对象发送异步请求. 2.为什么使用 Ajax减轻服务器的负担.Ajax的原则是"按需取数据",可以最大程序地减少冗余请求,减轻服务器的负担. 无需刷新页

  • Js调用Java方法并互相传参的简单实例

    Js通过PhoneGap调用Java方法并互相传参的. 一.JAVA代码 写一个类,该类继承自Plugin并重写execute方法. import org.json.JSONArray; import android.app.Activity; import android.app.AlertDialog; import android.content.ActivityNotFoundException; import android.content.DialogInterface; impor

  • js的继承方法小结（prototype、call、apply）（推荐）

    js的继承方法小结（prototype、call、apply）（推荐）

    js的原型继承 --  prototype 先说下什么是prorotype? js中,俗话说"一切皆对象".用new 出来的都是函数对象:否则就是普通对象 函数对象都有prototype(原型对象):而普通对象则只有__proto__(原型指针) 函数对象的一个特点:可以实现不同类之间的方法继承 函数的子类可以共享父类的方法,而父类不能想用子类的方法 eg: (prototype的继承) //创建父类函数对象 function Personal(name, age) { this.na

  • vue.js引入外部CSS样式和外部JS文件的方法

    学习Vue.js动画时,需要引入一个animate.css,如何全局引入外部文件呢? 一.引入外部CSS样式文件 1. 在app.vue中<style>下直接引入对应的路径 使用@import引入外部css,作用域是全局的,也可在相应的单vue组件引入,import并不是引入代码到<style></style>里面,而是发起新的请求获得样式资源,并且没有加scoped. <style scoped> @import "../static/font/

  • vue组件内部引入外部js文件的方法

    vue组件内部引入外部js文件的方法

    之所以要做这个是因为,在一个组件内部需要引入一个js文件来定位.如果放在index.html,这样每个组件都会有这个js.所以需要在组件内单独引入. 第一种操作 Dom引入js: export default { mounted() { const s = document.createElement('script'); s.type = 'text/javascript'; s.src = '你的需要的js文件地址'; document.body.appendChild(s); }, } 第

  • 原生js调用json方法总结

    Ajax基础 ajax:无刷新数据读取,读取服务器上的信息 HTTP请求方法: GET:用于获取数据,如浏览帖子 ajax.judgeXmlHttpRequest('get', 'index.php', function(data){ alert(data); //这是服务器返回的数据 }) POST:用于上传数据,如用户注册 var dataJson = { name: 'ys',age: 123 } ajax.judgeXmlHttpRequest('post', 'index.php',

  • JS调用打印方法设置页眉页脚的实例

    设置页眉页脚 var HKEY_RootPath="HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\"; function PageSetup_del(){ try{ var WSc=new ActiveXObject("WScript.Shell"); HKEY_Key="header"; WSc.RegWrite(HKEY_RootPath+HKEY_

  • 多种方式实现JS调用后台方法进行数据交互

    项目开发过程中很多地方都需要前端和后台的数据交互,几种典型常用的方法如利用控件的AutopostBack属性.Button提交表单等等.但这些都是有条件的,AutoPostBack具有实时性但会刷新页面,Button提交表单不能实现数据交互的实时性.当然说到前台与后台的数据交互更不能漏掉ajax,ajax实现前台与后台数据的异步交互,并且保证实时的.局部刷新.但有些数据不需要异步交互,例如当交互的数据是下一步执行的条件时,就必须要等到数据前台与后台数据交互完成后才能继续执行程序.所以对于掌握js

随机推荐