максимальный размер стека вызовов превысило ошибка в Chrome с помощью jQuery шаблоны

Я загружаю более 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 нет проблем. Поэтому я предполагаю, что это как-то связано с размером HTML, который я пытаюсь отобразить, как я прочитал здесь.

Есть ли решение этой проблемы? I

1 2
jquery google-chrome jquery-templates

1 ответ:

У меня была та же проблема. Если вы посмотрите на jquery.код tmpl вы можете найти 

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

Проблема в 

jQuery.map( content, function( item ) {

Для каждого элемента в массиве' content ' (а у вас здесь, я думаю, более 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 элементов и не допускает превышения максимального размера стека вызовов.

Это грубое решение но надеюсь, что это поможет вам :)

8