0

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/

Shanmu_92
  • 835
  • 1
  • 7
  • 20

2 Answers2

2

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

BorisMoore
  • 8,444
  • 1
  • 16
  • 27
0

The error you mentioned was a bug in the version 0.9.86. It was a jsviews bug causing the issue which was discussed and closed here

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

Use the version above it(1.0.0-beta) and the error should not be appearing. You can check all the versions from the link below:

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

Nikhil Nanjappa
  • 6,454
  • 3
  • 28
  • 44