0

カスタム Dojo ウィジェットの 1 つに問題があります。

MVC 構造を使用してウィジェットを作成しています。また、Dojo の dojox/mvc 機能も使用しています。

WidgetList を持ち、InlineTemplate 内にあるテンプレートがあります。

私の問題は、ストア内に 50 個を超えるアイテムがある場合、非常に遅いことです。

レンダリングされたデータが画面に表示されるまでに 15 秒かかる場合があります。

誰かがその問題を抱えたことがありますか? もしそうなら、どのように解決しましたか?

さらに情報が必要な場合は、私に尋ねてください。

編集 ：

これは、WidgetList と InlineTemplate を含むテンプレートです。

ここにあってはならないものを見たら教えてください！

<div>
<script type="dojo/require">at: "dojox/mvc/at"</script>
<div class="container-fluid">
    <div class="row-fluid" id="flaggedWidgetList2">
        <div>
            <h3>Test 1</h3>
        </div>
        <div data-dojo-type="dojox/mvc/WidgetList"
            data-dojo.attach-point="flaggedPoint"
            data-dojo-mixins="dojox/mvc/_InlineTemplateMixin"
            data-dojo-props="children: at(this.controller.model.listItems, 'Items')">
            <script type="dojox/mvc/InlineTemplate">
               <div class="row-fluid" data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'notRead'), _setValueAttr: {node: 'domNode', type: 'cssClass'}">
                <div class="row-fluid itemRow">
                    <div class="span1" style="float: left;">
                        <input class="span3" type="checkbox" style="float: left;" />
                        <span class="dateRecieved span9" data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'DateReceived'), _setValueAttr: {node: 'domNode', type: 'innerText'}"></span>
                    </div>
                    <div class="span1" style="float: left;">
                        <span class="span12" data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'PriorityFlag'), _setValueAttr: {node: 'domNode', type: 'innerText'}"></span>
                    </div>
                    <div class="span10" style="float: left;">
                        <div class="row-fluid">
                            <span class="from span3" data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'Sender'), _setValueAttr: {node: 'domNode', type: 'innerText'}"><b></b></span>
                            <span class="docId span1 offset8" data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'AttachmentNumber'), _setValueAttr: {node: 'domNode', type: 'innerText'}"><b></b></span>
                        </div>
                        <div class="row-fluid">
                            <span class="title span12" data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'Title'), id: at('rel:', 'WobNum'), _setValueAttr: {node: 'domNode', type: 'innerText'}"></span>
                        </div>
                        <div class="row-fluid">
                            <span class="span3" data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'AttachmentType'), _setValueAttr: {node: 'domNode', type: 'innerText'}"><b>[]</b></span>
                            <span class="deadline span1 offset8" data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'Deadline'), _setValueAttr: {node: 'domNode', type: 'innerText'}"><b></b></span>
                        </div>
                    </div>
                </div>
                <div class="row-fluid">
                     <div class="span10 offset2" data-dojo-type="DTWidgets/ActionsMenu/ActionMenu" data-dojo-attach-point="itemId" data-dojo-props="itemId: at('rel:', 'WobNum'), _setValueAttr: {node: 'domNode', type: 'itemId'}"">
                    </div>
                </div>
                </div>
            </script>
        </div>
    </div>
</div>

ありがとう、

ソロン

4

1 に答える 1

0

dojox/mvc/WidgetListに基づいており、子の追加はを使用するdijit/_Containerその を介して行われます。子が に基づいている場合(使用されている場合) は、すべての子に対して実行され、テンプレート内のウィジェットをインスタンス化します。addChild()domConstruct.place()dijit/_WidgetsInTemplateMixindojox/mvc/_InlineTemplateMixindojo/parser

の性能を考えると、この2つが主要な部分だと思いますdojox/mvc/WidgetList。前者 ( への呼び出しaddChild()) はコードで行われdojox/mvc/WidgetList、後者 (テンプレートでのウィジェットのインスタンス化) はコードで行われるため、たとえばdijit/_WidgetsInTemplateMixinperformance.now()APIなどを使用して、それらの各反復にかかる時間を詳しく調べたい場合があります。 、たとえばChrome デベロッパー ツールのタイムライン パネルを使用して、さらに掘り下げる必要がある場合があります。

以下のコードはスターターとして役立つかもしれませんが、子ウィジェットをレンダリングするのにそれほど時間はかかりませんでした:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            @import "//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/resources/dojo.css";
            @import "//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css";
        </style>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js" 
            data-dojo-config="parseOnLoad: 0, async: 1"></script>
        <script type="text/javascript">
            require([
                "dojo/_base/array",
                "dojo/parser",
                "dojo/when",
                "dojo/Stateful",
                "dojox/mvc/StatefulArray",
                "dojo/domReady!"
            ], function(array, parser, when, Stateful, StatefulArray){
                model = new Stateful({items: []});
                when(parser.parse(), function(){
                    model.set("items", new StatefulArray(array.map(new Array(50), function(){
                        return new Stateful({
                            notRead: 1,
                            cssClass: "cssClass",
                            DateReceived: "DateReceived",
                            PriorityFlag: 1,
                            Sender: "Sender",
                            AttachmentNumber: 1,
                            Title: "Title",
                            WobNum: 1,
                            AttachmentType: "AttachmentType",
                            Deadline: "Deadline"
                        });
                    })));
                });
            });
        </script>
    </head>
    <body>
        <script type="dojo/require">at: "dojox/mvc/at"</script>
        <div>
            <div>
                <div data-dojo-type="dojox/mvc/WidgetList"
                    data-dojo-mixins="dojox/mvc/_InlineTemplateMixin"
                    data-dojo-props="children: at(model, 'items'), partialRebuild: 1">
                    <script type="dojox/mvc/InlineTemplate">
                        <div>
                            <div data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'notRead'), _setValueAttr: {node: 'domNode', type: 'cssClass'}">
                            <div> 
                                <div>
                                    <input type="checkbox" />
                                    <span data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'DateReceived'), _setValueAttr: {node: 'domNode', type: 'innerText'}"></span>
                                </div>
                                <div>
                                    <span data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'PriorityFlag'), _setValueAttr: {node: 'domNode', type: 'innerText'}"></span>
                                </div>
                                <div>
                                    <div>
                                        <span data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'Sender'), _setValueAttr: {node: 'domNode', type: 'innerText'}"><b></b></span>
                                        <span data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'AttachmentNumber'), _setValueAttr: {node: 'domNode', type: 'innerText'}"><b></b></span>
                                    </div>
                                    <div>
                                        <span data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'Title'), id: at('rel:', 'WobNum'), _setValueAttr: {node: 'domNode', type: 'innerText'}"></span>
                                    </div>
                                    <div>
                                        <span data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'AttachmentType'), _setValueAttr: {node: 'domNode', type: 'innerText'}"><b>[]</b></span>
                                        <span data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'Deadline'), _setValueAttr: {node: 'domNode', type: 'innerText'}"><b></b></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </script>
                </div>
            </div>
        </div>
    </body>
</html>

それらが役立つことを願っています。

ベスト、アキラ

于 2013-05-02T07:33:16.470 に答える