2

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 のサイズと関係があると思います。

この問題の解決策はありますか? 私

4

1 に答える 1

10

同じ問題がありました。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 要素ごとに処理し、「最大コール スタック サイズの超過」を許可しません。

これは大まかな解決策ですが、お役に立てば幸いです:)

于 2013-05-03T15:44:29.057 に答える