Google Maps API용 템플릿에서 Flask의 데이터를 JavaScript로 전달하는 방법은 무엇입니까?

Flask에서 템플릿의 JavaScript로 데이터 전달

개요

Flask 애플리케이션에서는 Python 사전의 정보를 템플릿의 JavaScript로 전달해야 합니다. 특히 Google Maps API용.

솔루션

Flask의 Render_template은 HTML 렌더링을 위해 템플릿에 변수를 전달하는 메커니즘을 제공합니다. 이 기능을 JavaScript로 확장하려면 Jinja 템플릿 엔진을 활용할 수 있습니다. 방법은 다음과 같습니다.

1. 어디서나 변수 통합: Jinja 변수는 JavaScript 부분을 포함하여 템플릿 전체에서 사용할 수 있습니다.
2. 직접 할당: {{ 변수 }}를 사용하여 JavaScript 변수를 직접 할당합니다. 예를 들어 JavaScript 변수에 경도를 할당할 수 있습니다:

<code class="javascript"><script>
  var longitude = '{{ geocode[1] }}';
</script></code>

3. 배열 정의 생성: 배열을 JavaScript에 전달하려면 생성하세요. 템플릿에서 배열 정의로 사용:

<code class="html">  <script>
    var geocode = ['{{ geocode[0] }}', '{{ geocode[1] }}'];
  </script></code>

4. Jinja 구문 활용: Jinja는 더욱 고급 구문을 제공합니다. 예를 들어 조인 필터를 사용하여 배열 정의를 단축할 수 있습니다.

<code class="html"><script>
  var geocode = [{{ ', '.join(geocode) }}];
</script></code>

5. tojson 필터 고려: 더 복잡한 데이터 구조의 경우 tojson 필터를 사용하여 JavaScript 사용을 위해 사전과 목록을 JSON 문자열로 변환:

<code class="html">  <script>
    var geocode = {{ geocode | tojson }};
  </script></code>

위 내용은 Google Maps API용 템플릿에서 Flask의 데이터를 JavaScript로 전달하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!