Question

我有一个包含Twig代码的Javascript模板。在我的控制中，我将一个数组传递给模板。我使用Javascript使用Google地图Api显示地图Javascript。我创建了一个变量，我在创建标记时在每个循环中递增。这个变量我想使用这个变量来根据给定的索引访问表的每个元素。由于数组是在twig中，索引是在Javascript中。连接似乎很复杂。

这就是这个问题的关键所在：

infowindow.setContent('<div><strong>{{ services['+j+']["name"] }}</strong><br>');

这里＆＃39;完整的例子：

var j = 0;
var markers = locations.map(function(location, i) {
    var marker = new google.maps.Marker({
        position: location
    });

    service.getDetails(
    {
        placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4'
    },
    function(place, status) {
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent('<div><strong>{{ services['+j+']["name"] }}</strong><br>');
            infowindow.open(map, this);
        });
    });

    j++;

    return marker;    
});

Answer 1

浏览器（执行javascript的地方）甚至不知道Twig是否参与，因为此时整个Twig代码已经呈现为纯HTML / CSS / Javascript。因此，使用Javascript来操作Twig渲染是不可能的。

相反，你可以

<强> 1。将整个服务数组传递给Javascript

这看起来像这样（数组在第2行传递，而infowindow.setContent的行现在正在使用javascript数组）：

var j = 0;
var services = {{ services|json_encode|raw }};
var markers = locations.map(function(location, i) {
    var marker = new google.maps.Marker({
        position: location
    });

    service.getDetails(
        {
            placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4'
        },
        function(place, status) {
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent('<div><strong>' + services[j]["name"] + '</strong><br>');
                infowindow.open(map, this);
            });
        });
    j++;
    return marker;

});

问题在于，您可以将整个服务数组传递给客户端。如果它很大或包含合理的信息，你不应该这样做。相反，你应该看一下解决方案2：

<强> 2。将适应的service_names数组传递给Javascript

渲染Twig模板的位置也会传递service_names数组：

$twig->render('the_template.twig', [
    'services' => $services,
    'service_names' => array_column($services, 'name')
]);

然后相应地调整答案1中的解决方案：

var j = 0;
var service_names = {{ service_names|json_encode|raw }};
var markers = locations.map(function(location, i) {
    var marker = new google.maps.Marker({
        position: location
    });

    service.getDetails(
        {
            placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4'
        },
        function(place, status) {
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent('<div><strong>' + service_names[j] + '</strong><br>');
                infowindow.open(map, this);
            });
        });
    j++;
    return marker;

});

如何在Javascript

1 个答案: