在 Jinja 中加载页面时，在未调用的函数中检查模板变量是否未定义

Question

技术栈:

我的堆栈是 Flask。 Python 与 HTML、CSS、JS.

背景:

我有一个变量 myList。这是一个列表，它从 python 传递到前端。此列表在页面加载时为空。这是我的视图函数中的 GET 请求代码。

myListBackend.clear()
return render_template(
    'page.html', 
    myList=myListBackend, 
    myListLength = len(myListBackend) 
)

我成功地能够在我的模板中访问和使用这些变量：

<b> {{ myList[myListLength-1] }} </b>

请注意，我只尝试在模板中不为空时使用此 myList。它最终会被填满。稍等片刻。
我有一个用作按钮的标记，并在单击时调用名为 myFunc 的函数。代码是：

<a href="#" onclick="myFunc()"> &#8250; </a>

这个标签只有在列表不为空的情况下才会显示给用户。该条件的代码是：

{% if myListLength != 0 %}

变量 myList 仅在 POST 中的视图函数中填充，不用担心，它确实会被填充（我对该列表还有其他用途，当我 use/print 它在 html 中）。点击调用的myFunc函数在JS中定义如下：

function myFunc(){
    console.log("I am here"); // This line is important
    if ( '{{myListLength}}' != 0 ){
       console.log( '{{ myList[myListLength-1] | tojson }}' );
    }
}

此函数尝试访问最初从 python 传递的 myList 变量的索引。

问题:

当我加载页面（GET 请求）时，它在函数 myFunc 的 if 条件内的 console.log 中给我错误。错误是：

TypeError: Object of type Undefined is not JSON serializable

问题是我没有在其他任何地方调用 myFunc。而且它不打印 "I am here" 的 console.log（myFunc 的第一行）。

那么，为什么程序直接访问使用索引的代码行呢？我知道如果代码以某种方式转到该函数，那么它会抛出错误。但是，如果列表是空的，我不会让它去那里。我还写道，如果它以某种方式到达那里，则停止流动的条件，但这似乎没有做任何事情。
我认为这可能与 Jinja 的行为有关，因为它忽略了 console.log，因此，它可能只检查绑定变量（从后端传递给模板的变量）语句。

Answer 1

由于您正在处理服务器端和客户端语言，因此您必须清楚地分开这两方面的处理。

一个想法是将 Flask 中的列表分配给一个 JavaScript 变量，然后在纯 JavaScript.

中处理该变量

因此，您的 JavaScript 部分将变为：

var list = JSON.parse('{{ myList | tojson }}');
function myFunc(){
  if(list.length > 0){
    console.log(list[list.length - 1]);
  }
}

在 Jinja 中加载页面时，在未调用的函数中检查模板变量是否未定义

Template variable being checked for undefined inside an uncalled function on page load in Jinja

javascript

python

flask

jinja2