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;
    }
}

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

Answer 1

我想避免在我的JavaScript中包含Twig变量，原因有两个：

跟踪JavaScript中的问题来源突然不仅限于您的JavaScript文件。问题可能在于您的Twig语法，甚至在您的控制器逻辑中。
这需要在模板中包含JavaScript内联，这会引入各种问题。执行顺序和可维护性可能是其中的主要内容。

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

当然，使用新的闪亮方法会遇到浏览器支持问题。您可以查看有关浏览器支持的信息here。如果您需要定位没有可靠支持的浏览器，您可以查看Foundation的Abide组件，或查看垫片，其中有几个。

TWIG中的Javascript从inputbox id获取数据

1 个答案: