在 jsrender.js 中超出了最大调用堆栈大小

Question

我在使用 jsrender 在表中创建 900 列时遇到错误。我使用了下面的代码。

        var i = 0, htmlStr =  "<tr style = 'height: {{:height}}px' idx = '{{:rowidx}}'>" , colgrp = document.createElement("colgroup"), templates ={obj:""};
        while (i < 900) {
            colWth = 20;
            colHdr = "A" + 1;
            col = document.createElement("col");
            col.style["width"] = colWth + "px";
            htmlStr += "<td class='{{:" + colHdr + "_className}}' rowspan=' {{:" + colHdr + "_rspan}}' colspan=' {{:" + colHdr + "_cspan}}'>{{:" + colHdr + "_value}}</td>";
            colgrp.append(col);
            i++;
        }
        templates["obj"] = htmlStr + "</tr>";
        $.templates(templates);

运行示例时出现错误。

JsViewsError {name： "JsRender Error"， message： "Syntax error↵编译的模板代码：↵↵//obj↵var v...↵return ret;↵： "超出最大调用堆栈大小"}

> jsrender-1.0.0-beta 中发生的错误.js <.这在确切的 jsrender-1.0.0-beta.js 版本中工作正常。您能否建议任何适用于所有版本的解决方案。

JSFiddle link： https://jsfiddle.net/z8fqs1yb/2/

Answer 1

这似乎是Chrome的问题。在其他浏览器中，它可以毫无错误地呈现。在 Chrome 中，如果您输入while (i<900)，它会出错，但如果您输入while (i<400)(或更少(，它可以正常工作而不会出错。

您创建模板的方式在单个模板中包含 900 * 4 = 3600 个{{: ...}}标签。Chrome 在编译该模板时抛出错误 - 因为它们对表单的 JavaScript 表达式有某种限制

var ret="..." +((v=...)!=null?v:"") + "..." +((v=...)!=null?v:"") + "..." +((v=...)!=null?v:"")...

(其中有>7200 个此类术语加在一起以生成单个字符串变量(。

我建议您改用模板

，如下所示

<tr style = 'height: {{:height}}px' idx = '{{:rowidx}}'>
  {{for cols}}
    <td class='{{:_className}}' rowspan=' {{:_rspan}}' colspan=' {{:_cspan}}'>{{:_value}}</td>
  {{/for}}
</tr>

然后，您可以使用具有 900 个列项的 cols 数组的数据呈现模板：

var data = {
  height: 220,
  rowidx: "a",
  ...
  cols: [
    {_value: "AVal", _className: "AClass",  ...},
    {_value: "BVal", _className: "BClass", ...}
    ...
  ]
};

在这里看到相同的回复： jsrender/issues/325

Answer 2

您提到的错误是版本0.9.86中的错误。这是一个jsviews错误，导致此处讨论并关闭的问题

https://github.com/BorisMoore/jsviews/issues/304

使用上面的版本( 1.0.0-beta (，错误应该不会出现。您可以从以下链接检查所有版本：

https://cdnjs.com/libraries/jsrender/1.0.0-beta