js template 模板 js文件模板

转载

棉花糖 2024-08-12 16:42:31

文章标签 js template 模板 python html 静态文件 HTML 文章分类 机器学习人工智能

问题描述 :

　　项目中若存在对一段js代码复用多次的时候, 通常将此段代码移动到一个单独的静态文件中在被使用的地方利用 script 标签的 src 属性进行外部调用

　　但是如果此文件中存在使用 HTML模板语言中的 {{ }}方式传递相关属性值, 会导致无法正确获取.

问题现象:　　

　　HTML页面拿到的值为字符串形式 :

js template 模板 js文件模板_js template 模板

问题解决:

　　静态js 文件:

1 $("#div_digg .action").click(function () {
 2     // 点赞或踩灭
 3     var is_up = $(this).hasClass("diggit");
 4     // 静态文件中的时候,模板语言的地方是无法传递过来值得,根本就没有 render
 5     // var article_id = "{{ article.pk }}";
 6     var article_id = $(".info").attr("article_id");
 7 
 8     $.ajax({
 9         url: "/blog/up_down/",
10         type: "post",
11         data: {
12             is_up: is_up,
13             article_id: article_id,
14             csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
15         },
16         success: function (data) {
17             console.log(data);
18 
19 
20             if (data.state) {// 赞或者灭成功
21 
22                 if (is_up) {
23                     var val = $("#digg_count").text();
24                     val = parseInt(val) + 1;
25                     $("#digg_count").text(val);
26                 } else {
27                     var val = $("#bury_count").text();
28                     val = parseInt(val) + 1;
29                     $("#bury_count").text(val);
30                 }
31             }
32             else {    // 重复提交
33 
34                 if (data.fisrt_action) {
35                     $("#digg_tips").html("您已经推荐过");
36                 } else {
37                     $("#digg_tips").html("您已经反对过");
38                 }
39 
40                 setTimeout(function () {
41                     $("#digg_tips").html("")
42                 }, 1000)
43 
44             }
45 
46         }
47     })
48 
49 
50 })

　　HTML文件:

1 {% extends 'base.html' %}
 2 
 3 {% block page-main %}
 4 
 5     <div class="article-detail">
 6         <h1>{{ article.title }}</h1>
 7         <p>{{ article.articledetail.content|safe }}</p>
 8     </div>
 9 
10     <div id="div_digg">
11         <div class="diggit action">
12             <span class="diggnum" id="digg_count">{{ article.up_count }}</span>
13         </div>
14         <div class="buryit action">
15             <span class="burynum" id="bury_count">{{ article.down_count }}</span>
16         </div>
17         <div class="clear"></div>
18         <div class="diggword" id="digg_tips" style="color: red;"></div>
19     </div>

20     <!--通过标签的自定义属性来传递,让浏览器通过解析html代码拿到想要的值-->
21     <div class="info" article_id="{{ article.pk }}"></div>


22     {% csrf_token %}
23     <!--这样外部引入会导致内部的 模板语言的用法的地方无法拿到值,可以通过标签来传递-->
24     <script src="/static/js/article_detail.js"></script>


25 
26 {% endblock %}

问题解决原理:

　　在js代码中可以使用 {{ }} 的模板语言进行当前页面的相关值操作
　　　　但是必须要在外面加双引号 "{{ }}" 因为这个值的出来之后是 : 羊驼而不是 "羊驼"
　　　　不带双引号会被认为是没定义的变量名无法操作
　　在HTML代码中本来就可以使用 {{ }} 的模板语言进行当前页面的相关值操作
　　　　但是HTML 本身的页面渲染的的值就是不带双引号的,难道你看网页的时候所有的显示都带双引号吗?

　　因此在js 代码中使用 {{}} 是完全没有问题的,问题在于当js代码被被存在静态文件的时候.我们需要熟知 web请求的原理