Question

树枝：

    {% for i in score %}
    <canvas class="credsEarned">
    <div id="test" data-is-test="{{ i.pts|json_encode }}">
    </div>
    </canvas>
    {% endfor %}

javascript：

$(document).ready(function(){
var contexts = $('.credsEarned');
    for(var i = 0;i<contexts.length;i++){ 
        var data = $('#test').data("isTest");
var context = contexts.get(i).getContext('2d');
}
});

结果：

只有树枝环中的第一个变量才能连续重复

使用此文档https://symfony.com/doc/3.4/frontend/encore/server-data.html

我修改了我的代码但仍然是相同的结果

树枝：

{% for i in score %}
<canvas class="credsEarned">
<div class="js-user-rating" data-is-authenticated="{{ i.pts }}"></div>
</canvas>
{% endfor %}

javascript：

$(document).ready(function(){

    var contexts = $('.credsEarned');
    for(var i = 0;i<contexts.length;i++){
        var userRating = document.querySelector('.js-user-rating');
        var data = userRating.dataset.isAuthenticated;
}
});

Answer 1

我不知道您的脚本有多大，但您可以将其放在模板中以使用twig设置变量。

{% for i in score %}
    <canvas class="credsEarned">
        <div class="js-user-rating"></div>
    </canvas>
{% endfor %}

<script>
    $(document).ready(function(){
        var dataArray = [
            {% for i in score -%}
                {{ i.pts|json_encode }},
            {% endfor -%}
        ];

        var contexts = $('.credsEarned');
        for(var i = 0;i<contexts.length;i++){ 
            var data = dataArray[i];
            var context = contexts.get(i).getContext('2d');
        }
    });
</script>

我理解起来很简单，但当然你可以将脚本放在一个树枝块中，将它加载到页面底部。

如果你不能（或者不想）将脚本的这一部分与其余部分分开以便将它放在模板中，你可以在模板中的全局变量中设置数据并使用它在文档准备就绪时，在您的javascript文件中：

嫩枝：

{% for i in score %}
    <canvas class="credsEarned">
        <div class="js-user-rating"></div>
    </canvas>
{% endfor %}

<script>
    dataArray = [
        {% for i in score -%}
            {{ i.pts|json_encode }},
        {% endfor -%}
    ];
</script>

使用Javascript：

<script>
    $(document).ready(function(){
        var contexts = $('.credsEarned');
        for(var i = 0;i<contexts.length;i++){ 
            var data = dataArray[i];
            var context = contexts.get(i).getContext('2d');
        }
    });
</script>

Answer 2

我在这里看到的是你没有使用indice 我来选择你的 js-user-rating ，这是正常的吗？我认为为什么你总是第一个元素。

可能是，你可以这样做：

for(var i = 0;i<contexts.length;i++){
  var context = contexts[i]
  var userRating = context.find('.js-user-rating');
  var data = userRating.dataset.isAuthenticated;
  ...
}

如何使用JSON将信息从Twig传递到Javascript？

2 个答案: