0

私はDojo 1.8 フレームワークを使用して、他のメニュー ウィジェットを含むウィジェットを作成しています。そのインスタンスを作成すると表示されますが、基本的なテンプレート要素のみが表示され、詳しく調べてみると、メニュー ウィジェットは追加されていません。次に、(ボタンをクリックして) 2 番目のインスタンスを作成すると、メニューを含めて正しく表示されます。

これは本当に私を混乱させます、何かアイデアはありますか?

ところで、ウィジェット インスタンスで startup() を呼び出しています。

これが私のテンプレートのコードです...

<div class="${!baseClass}ConfigPanel">
        <div data-dojo-attach-point="heading">Configure data</div>
        <div id="menuContainer" data-dojo-attach-point="menu"></div>
</div>

これが私のウィジェットのコードです...

define(
    ["dojo/_base/array",
    "dijit/Menu",
    "dijit/MenuItem",
    "dijit/PopupMenuItem",
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin",
    "dojo/text!gdv/chart/configuration/panel/chartConfigTemplate.html",
    "dojo/domReady!"],
    function (ArrayUtil, Menu, MenuItem, PopupMenu, declare, WidgetBase, TemplatedMixin, template){

        var _menuData = [{title:"Region", data:["Region1", "Region2", "Region3"]},
                                        {title: "Variable", data:["variable1", "variable2", "variable3"]},
                                        {title: "Period", data:["period1", "period2"]},
                                        {title: ["latest", "rt1", "rt2"]}];


        /**
         * Build menu items up with a popup menu style
         */
        function buildMenu(nodeId, menuItems){
            var mainMenu = new Menu({label: "main menu"}, nodeId);
            var subMenuCollection = [];
            var subMenu;

            ArrayUtil.forEach(menuItems, function(item, index){
                subMenu = new Menu({label: item.title});
                subMenuCollection.push(subMenu);

                //loop through each item in data and create a new menu item from it
                ArrayUtil.forEach(item.data, function(subItem, subIndex){
                    subMenu.addChild(new MenuItem({label: subItem}));
                });

                //set the sub menu to popup from the main menu
                mainMenu.addChild(new PopupMenu({label: item.title, popup: subMenu}));

            });

            //create the menus
            mainMenu.startup();

            //start each sub menu
            ArrayUtil.forEach(subMenuCollection, function (item, index){
                item.startup();
            });
        }

        //return a new widget class
        return declare([WidgetBase, TemplatedMixin], {
            templateString: template,
            baseClass: "plumePlots",

            //when dom structure is ready but before page insertion
            postCreate: function(){

                //run all parent postCreate functions
                this.inherited(arguments);

                var menuNode = this.menu;
                buildMenu(menuNode.id, _menuData);
            }
        });
    }
)
4

1 に答える 1

1

わかりました答えを見つけました。それはウィジェットのライフサイクルにかかっていました。Dojoウィジェットのチュートリアルからのこの引用は説明に役立つはずです...

起動（）

おそらく Dijit ライフサイクルで 2 番目に重要なメソッドは、起動メソッドです。このメソッドは、DOM フラグメントが実際にドキュメントに追加された後に処理を行うように設計されています。潜在的な子ウィジェットが作成されて開始されるまで、それは起動されません。これは、複合ウィジェットやレイアウト ウィジェットに役立ちます。

そのため、ドキュメントに追加されていない dom 要素を参照しようとしていたことがわかりました。

コードを修正するために、メニュー ウィジェットを作成するコードを postCreate() メソッドから startup() メソッドに移動しただけで、問題は解決しました。変更を示すコード スニペットは次のとおりです...

//return a new widget class
        return declare([WidgetBase, TemplatedMixin], {
            templateString: template,
            baseClass: "plumePlots",

            //when dom structure is ready but before page insertion
            postCreate: function(){             
                //run all parent postCreate functions
                this.inherited(arguments);
            },

            startup: function(){  // added startup function
                var menuNode = this.menu; // code moved to here
                buildMenu(menuNode.id, _menuData); // and here
            }
        });
于 2012-11-22T14:15:48.957 に答える