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: "语法错误↵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 链接：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 错误导致已讨论并关闭 here

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

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

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