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

Question

我在使用 jsrender 在 table 中创建 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↵Compiled template code:↵↵// obj↵var v…↵return ret;↵: "Maximum call stack size exceeded""}

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

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

Answer 1

您提到的错误是版本 0.9.86 中的一个 bug。这是一个 jsviews 导致问题的错误，该问题已被讨论并关闭 here

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

使用它上面的版本(1.0.0-beta)，错误应该不会出现。您可以在下面的 link 中查看所有版本：

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

Answer 2

这似乎是 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

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

Maximum call stack size exceeded in jsrender.js

html

javascript

jquery

jsrender