Maximum call stack size exceeded in jsrender.js

Question

I am facing the error while creating 900 columns in the table by using jsrender. I have used the below code.

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

While running the sample getting the error.

JsViewsError {name: "JsRender Error", message: "Syntax error↵Compiled template code:↵↵// obj↵var v…↵return ret;↵: "Maximum call stack size exceeded""}

The error occurring in > jsrender-1.0.0-beta.js < . Which is working fine in exact jsrender-1.0.0-beta.js version. Could you please suggest any solution to work in all the versions.

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

Answer 1

This seems to be an issue with Chrome. In other browsers it renders without error. In Chrome it errors if you put while (i<900), but if you put while (i<400) (or less) it works without error.

Your way of creating the template has 900 * 4 = 3600 {{: ...}} tags in a single template. Chrome throws an error while compiling that template - because of some kind of limit they have on JavaScript expressions of the form

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

(where you have >7200 such terms added together to produce a single string variable).

I'd suggest you instead use a template along the lines of

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

Then you can render the template with data which has a cols array of 900 items for the columns:

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

See same reply here: jsrender/issues/325