javascript - 更新函数内的 Twig 变量

Question

我正在尝试使用 twig 和 javascript。我只是想定义一个 var 并更新点击函数中的值。不幸的是，var 似乎被更新了，但是当函数范围结束时新值没有更新，所以控制台日志第一次写入 1，每次进入点击函数时写入 2。哪种方法更好？提前致谢

        {% set actual_index = 0 %}
        {% set num_elements = 3 %}

        addNewEvents();
        {% set actual_index = actual_index + 1 %}
        console.log({{ actual_index }})

        $("#load").click(function () { 
            addNewEvents();
            {% set actual_index = actual_index + 1 %}
            console.log({{ actual_index }})
        });

Answer 1

如何做到干净利落？将 Twig 与 javascript 分开。它们不打算一起使用(即使它可以工作)。

您有多种不同的方法来检索您的 js 信息。使用 twig 并将信息存储在隐藏的输入中，或者通过 AJAX 调用获取信息。

例如:

var actual_index = -1;
var num_elements = 0;

$.getJSON('ur_here', function(data){
  actual_index = data.actual_index;
  num_elements = data.num_elements;
});

但它似乎比这更进一步，你明白 twig 生成 HTML 服务器端并将其发送到客户端吗？ 这只会发生一次。

这意味着您设置 的变量只存在于服务器端，对吗？这意味着当您执行 {{ actual_index }} 时，它只会在客户端生成一个数字，而不是一个变量。

    {% set actual_index = 0 %}
    {% set num_elements = 3 %}

在 twig 生成您的 HTML 并将其发送到客户端之前，上述两个变量存在于服务器端。

这是你的 js 没有 Twig 的样子:

var actual_index = 0;
var num_elements = 3;

addNewEvents();
actual_index = actual_index + 1;
console.log(actual_index)

$("#load").click(function () { 
    addNewEvents();
    actual_index = actual_index + 1;
    console.log(actual_index);
});

---

编辑:

正在回答您的评论。

"{{ asset( path('event_values', { 'programmerid': programmerid, 'actual_index': actual_index, 'num_elements':num_elements } ))|raw }}

如果以上生成了一个 URL，那么你就在正确的道路上(否则请查看这篇文章 How Generating URLs from a template correctly in Symfony2/Twig)。

现在，getJSON的第一个参数是一个URL，第二个参数是回调。

请记住，您的 {{ asset... }} 应该生成一个可以在客户端调用的 URL。

所以在你的 Twig 生成你的 HTML 之后，URL 应该看起来像这样:

$.getJSON('http//:localhost/path/to/your/ajaxHandler.php', function(data){
  //this is called when you return data from your ajaxHandler.php
  //do something with data
});

这样，当您单击 ajaxHanlder.php 时，您可以将信息发送回 json ( echo json_encode(You array here); )