TWIG 中的 Javascript 从输入框 id 获取数据

Question

此脚本必须获取输入框值，其中id="{{probe.probeId}}"

当表列的值需要时，"{{probe.probeId}}" 在此输入框中从数据库“probeID”获取数据。 （如果有值，则显示；如果为空，则可以添加值；第三个选项是如果值为null）

然后它必须将该值与从存储的数据库列表中获取的最大允许值进行比较

for (param in allparamArray)
{
var maxVal = param.ValorMaximo;
}

然后，当我在输入框中输入一个超过允许的最大值 (maxVal) 的值时，单元格会发出红色光。

问题是当我将"{{probe.probeId}}" 放入脚本函数document.getElementById() 时，它无法识别从数据库中获取的id 值

如何将 javascript 值与 twig 表获取的值连接起来？

我想知道here 中给出的答案是否有用，但我不知道该怎么做。

这是我正在做的一个示例（带有树枝的片段）： http://jsfiddle.net/wbh6T/2/

没有 TWIG 就这么简单： http://jsfiddle.net/jBFHn/

TWIG 片段是这样的：

{% for parameter in apparamlist %}
    {% if parameter.parameterId in probe.parameterliste|keys %}
         {% if probe.parameterliste[parameter.parameterId].ulockstatus ==2 %}
            <td style='background-color:red;text-align:center;' title="{{probe.parameterliste[parameter.parameterId].comentario}}"><input class="resultfield" size='8' type='text' value="{{probe.parameterliste[parameter.parameterId].resultado}}" name={{parameter.parameterId}} id="{{probe.probeId}}"/></td>
        {% else %}
            <td style='text-align:center;'><input class="resultfield" size='8' type='text' value="{{probe.parameterliste[parameter.parameterId].resultado}}" name={{parameter.parameterId}} id="{{probe.probeId}}" /></td>
        {% endif %}
    {% else %}
        <td>&nbsp;</td>
    {% endif %}
{% endfor %}

还有 Javascript：

window.onload = function () {
    var textbox = document.getElementById("{{probe.probeId}}");
    for (param in allparamArray)
    {
        var maxVal = param.ValorMaximo;
    }

    addEvent(textbox, "keyup", function () {
        var thisVal = +this.value;

        this.className = this.className.replace(" input-error ", "");
        if (isNaN(thisVal) || thisVal > maxVal) {
            this.className += " input-error ";
            // Invalid input
        }
    });
};

function addEvent(element, event, callback) {
    if (element.addEventListener) {
        element.addEventListener(event, callback, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + event, callback);
    } else {
        element["on" + event] = callback;
    }
}

这是一个可能的解决方案吗？-> Twig master usage

Answer 1

出于以下几个原因，我喜欢避免在我的 JavaScript 中包含 Twig 变量：

1. 突然间，追踪 JavaScript 中问题的根源不仅限于 JavaScript 文件。问题可能出在您的 Twig 语法甚至您的控制器逻辑中。
2. 这需要在您的模板中包含 JavaScript 内联，这会带来各种问题。执行顺序和可维护性可能是其中最主要的因素。

您可以选择您提到的 FOSJsRoutingBundle 解决方案，但我认为这对于这个问题来说太过分了。相反，我会考虑对表单使用新的 HTML5 规范，它允许您指定一个正则表达式模式，浏览器将根据该模式验证表单输入。您可以在控制器中获取每个表单输入的模式，并将其与表单标记的其余部分一起输出到 Twig 中。

当然，使用新的和闪亮的意味着您会遇到浏览器支持问题。您可以查看有关浏览器支持的信息here。如果您需要针对没有可靠支持的浏览器，您可以查看 Foundation 的 Abide 组件，或者查看 shims，其中有一些。