从_entry.Twig中的Twig变量到外部脚本中的Javascript函数的数据_Javascript_Variables_Dynamic_Twig_Craftcms

从_entry.Twig中的Twig变量到外部脚本中的Javascript函数的数据

javascript variables dynamic twig

从_entry.Twig中的Twig变量到外部脚本中的Javascript函数的数据,javascript,variables,dynamic,twig,craftcms,Javascript,Variables,Dynamic,Twig,Craftcms,我已经创建了一个_layout.twig文件，该文件作为我保存页面上内容的基础->_layout.twig： <!DOCTYPE html> <html lang="{{ craft.app.language }}"> <head> <meta content="IE=edge" http-equiv="X-UA-Compatible" /> <meta char

我已经创建了一个_layout.twig文件，该文件作为我保存页面上内容的基础->_layout.twig：

<!DOCTYPE html>
<html lang="{{ craft.app.language }}">
  <head>
    <meta content="IE=edge" http-equiv="X-UA-Compatible" />
    <meta charset="utf-8" />
    <title>
      {{ siteName }}
    </title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
      name="viewport" />
    <link rel="stylesheet"
      href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
      integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
      crossorigin="" />
    {% includeCssFile siteUrl ~ 'assets/css/style.css' %}
  </head>
  <body>
    {% include '_includes/nav' %}
    <div>
      {% block content %}

      {% endblock %}
    </div>
    <footer class="main-footer">
      <div class="footer-wrapper">
        {{ exampleInformation.exampleDescription|markdown }}
        <p>
          &copy; {{ now|date('Y') }}, <a href="https://craftcms.com">Lorem Ipsum</a>
        </p>
      </div>
    </footer>
    <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"   integrity="sha512QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>
    {% includeJsFile siteUrl ~ 'assets/js/scripts.js' %}
  </body>
</html>

将向位于我的index.twig模板文件->index.twig中的地图输出一个标记（当前仅当我手动插入纬度和长坐标时有效）：

{% extends '_layout' %}
{% set posts = craft.entries.section('example').all() %}
{% block content %}
  <div class="background-test">
    <div id="map"></div>
  </div>
  <div class="main-container">
    <div class="main-wrapper">
      <h1 class="example-title">
        Some Title
      </h1>
      <div class="category-list">
        {% set entries = craft.entries.limit(null) %}
        {% for category in craft.categories.relatedTo(entries).order(
          'title asc'
        ) %}
          {% set entryCount = entries.relatedTo(category).total() %}
          <a href="{{ category.url }}">
            {{- category.title -}}<span class="count-number">({{ entryCount }})</span>
          </a>
        {% endfor %}
      </div>
      {% include '_includes/listing' with {
        posts: posts
      } only %}
    </div>
  </div>
{% endblock %}

从现有scripts.js文件中的my_entry.twig文件中获取变量，以便在index.twig页面上的地图上放置标记？我对手艺还是新手，对细枝更是如此，所以我还在学习这些东西的过程中

我的文件夹结构是：

/assets
   /css
   /js
      scripts.js
/templates
   /includes
   /blog
      _category.twig
      _entry.twig
       index.twig
   _layout.twig
   index.html

Any help would be greatly appreciated!

Thank you

首先确定一些指针，您可以向一个元素添加多个

数据-*

属性，并且

id

必须是唯一的。因此，我建议您将细枝模板替换为以下内容：

{%if entry.lotInfo | length%}

{entry.lotInfo%中的行的%s}
{%if row.createNewEntry='1%}

{{row.LATIONE}}，{{row.LATIONE}}

{%endif%}
{%endfor%}

{%endif%}

然后我们需要调整javascript，以便能够在地图上添加多个点。
首先删除下面的行

//设置位置数组
var位置=[{lat:'某些纬度坐标'，lng:'某些经度坐标'}]

正如您在

html

中定义的指针一样，我们只需要一个选择器来选择

data-*

属性在其中定义的所有元素


document.queryselectoral（“.entry\uu coordinate ul li”）.forEach（行=>{
addToMap（{'lat'：row.dataset.latcoordinate，'lng'：row.dataset.lngcoordinate，}）；
});

这是否回答了您的问题？请注意，重复答案的关键部分是，如果您的JS库期望

lat，long

作为字符串而不是int，

{{row.latitude}}，{{row.longitude}

不等于

{row.latitude}，{row.longitude}

（请注意引号

）。我想我的问题是，我如何传递两个变量：{{row.latitude}}，{{row.longitude}}在我的{u entry.twig模板页面中定义，该页面将{u layout.twig扩展到位于web/scripts.js中的javascript函数。我已经在dupe中更新了我的答案，为您提供了两个变量ways@DarkBee谢谢你的建议！我研究过那个职位，但不幸的是，我仍然没有成功。我已经更新了上面的问题，包括了我目前拥有的所有代码以及文件夹结构，希望能对我的错误有所帮助。如果您能提供任何建议，我们将不胜感激。基本上，我可以让{row.latitude}}和{{row.longitude}}到console.log条目页面本身上的值，但似乎不知道如何将它们传递到外部js并在索引页面上呈现的地图上显示。再次感谢你！非常感谢。我做了更改，并将您提供的脚本添加到我的_entry.twig页面的“返工”部分下，同时从我的script.js文件中删除“var locations=[]”。然而，似乎在某些地方仍然存在脱节。当_进入时。twig页面已打开，它会抛出错误“addToMap未定义”和“Map container not found”，并且在带有Map container的页面上，twig会根据我的外部js文件抛出“locations is not defined”。从映射容器所在的_entry.twig>scripts.js>index.twig（map）获取数据似乎仍然存在问题

//Set initial map view

var map = L.map('map', { scrollWheelZoom: false }).setView(
  [50.4205, -104.52],
  15,
)

//Initialize the tilemap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  minZoom: 14.5,
  attribution:
    '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map)

// Set location array
var locations = [{ lat: 'SOME LATITUDE COORDINATE', lng: 'SOME LONGITUDE COORDINATE' }]

function addToMap(locationArray) {
  //Iterate through array object
  ;[].forEach.call(locationArray, function (location) {
    var marker = L.marker([location.lat, location.lng]).addTo(map)
  })
}
//Show markers
addToMap(locations)

// Set location array
var locations = [{ lat: '(SOME LATITUDE VALUE)', lng: '-(SOME LONGITUDE VALUE') }];

{% extends '_layout' %}
{% set posts = craft.entries.section('example').all() %}
{% block content %}
  <div class="background-test">
    <div id="map"></div>
  </div>
  <div class="main-container">
    <div class="main-wrapper">
      <h1 class="example-title">
        Some Title
      </h1>
      <div class="category-list">
        {% set entries = craft.entries.limit(null) %}
        {% for category in craft.categories.relatedTo(entries).order(
          'title asc'
        ) %}
          {% set entryCount = entries.relatedTo(category).total() %}
          <a href="{{ category.url }}">
            {{- category.title -}}<span class="count-number">({{ entryCount }})</span>
          </a>
        {% endfor %}
      </div>
      {% include '_includes/listing' with {
        posts: posts
      } only %}
    </div>
  </div>
{% endblock %}

{{ row.latitude }}, {{ row.longitude }}

/assets
   /css
   /js
      scripts.js
/templates
   /includes
   /blog
      _category.twig
      _entry.twig
       index.twig
   _layout.twig
   index.html

Any help would be greatly appreciated!

Thank you