最大调用堆栈大小超过chrome使用jQuery模板的错误

Question

我正在加载超过7000条记录并将它们显示在我的页面上。

Firefox是做的很好，但我有使用Chrome

部分代码中的错误：

<tbody> 
    {{each(i, item) value}} 
    <tr> 
     <td class="item_action"> 
      <a class="edit_item" data-item="${item.id}"> 
       <img src="path/to/image_edit.png" /> 
      </a> 

      <img src="path/to/image_separator.png" /> 

      <a class="delete_item" data-item="${item.id}"> 
       <img src="path/to/image_delete.png" /> 
      </a> 
     </td> 
     <td class="item_name">${item.name}</td> 
    </tr> 
    {{/each}} 
</tbody> 

如果不是上面的我呈现这样的：

<tbody> 
    {{each(i, item) value}} 
    <tr> 
     <td class="item_name">${item.name}</td> 
    </tr> 
    {{/each}} 
</tbody> 

之后，Chrome没有问题。所以我想这跟我读取here的HTML的大小有关。

是否有解决此问题的方法？我

Answer 1

我有同样的问题。如果你看看jquery.tmpl代码，你可以找到

function build(tmplItem, nested, content) { ... 

的问题是在

jQuery.map(content, function(item) { 

的“内容”数组中的每一项（你有我在这里想超过50000元）应该称为功能。这对于Webkit浏览器来说太多了。 这段代码被修改了一点，解决我的问题：

function build(tmplItem, nested, content) { 
    // Convert hierarchical content into flat string array 
    // and finally return array of fragments ready for DOM insertion 
    var processMap = function(){ 
     var result = []; 
     var items = []; 
     for(var i = 0; i<content.length; (i = i+10000)){ 
      var subcontent = content.slice(i, i+10000); 
      items = jQuery.map(subcontent, function(item) { 
         return (typeof item === "string") ? 
          // Insert template item annotations, to be converted to jQuery.data("tmplItem") when elems are inserted into DOM. 
          (tmplItem.key ? item.replace(/(<\w+)(?=[\s>])(?![^>]*_tmplitem)([^>]*)/g, "$1 " + tmplItmAtt + "=\"" + tmplItem.key + "\" $2") : item) : 
          // This is a child template item. Build nested template. 
          build(item, tmplItem, item._ctnt); 
      }); 
      result = result.concat(items); 
     } 
     return result; 
    }; 
    var frag, ret = content ? processMap(): 
    // If content is not defined, insert tmplItem directly. Not a template item. May be a string, or a string array, e.g. from {{html $item.html()}}. 
    tmplItem; 
    if (nested) { 
     return ret; 
    } ... 

所以jQuery.map功能过程中的每个元素10000，并且不允许“最大调用堆栈大小超出了”。

这是一个粗略的解决方案，但希望它可以帮助你:)