程序化 Dijit/树未出现在声明性 Dijit/ContentPane 中答案

【问题标题】：Programmatic Dijit/Tree Not Appearing in Declarative Dijit/ContentPane程序化 Dijit/树未出现在声明性 Dijit/ContentPane 中
【发布时间】：2014-04-19 10:56:04
【问题描述】：

谁能帮我弄清楚为什么这在 Dojo 1.8 中有效，但在 1.9 中无效？

在 1.8 中，树被放置在“pilotTreeContainer”内容窗格中。在 1.9 中，如果您在 Firebug 中查看，树就在那里，但在视觉上，它只是显示一个加载图形。在包含此代码的小部件的模板文件中声明了 PilotTreeContainer。所有这些代码都在postCreate 方法中。

var treeStore = lang.clone( store );

var treeModel = new ObjectStoreModel(
{
    store: treeStore,
    query: { id: 'all' },
    mayHaveChildren: function ( item ) // only ships have the unique attribute
    {
        return item.unique === undefined;
    }
} );

var pilotTree = new Tree(
{
    model: treeModel, // do we need to clone?
    autoExpand: true,
    showRoot: false,
    title: 'Click to add',
    openOnClick: true,
    getDomNodeById: function ( id ) // new function to find DOM node
    {
        if ( this._itemNodesMap !== undefined && this._itemNodesMap[ id ] !== undefined && this._itemNodesMap[ id ][0] !== undefined ) {
            return this._itemNodesMap[ id ][0].domNode;
        }
        else {
            return null;
        }
    }
} );


this.pilotTree = pilotTree;

this.pilotTreeContainer.set( 'content', pilotTree );

我尝试在树和内容窗格上调用启动。

调试 dijit/Tree 代码，似乎有一个永远无法解决的延迟。从 _load 函数调用时（尝试扩展根节点 this._expandNode(rn).then 时）从 _expandNode 函数返回。

dijit/Tree 中失败的部分是这样的：

// Load top level children, and if persist==true, all nodes that were previously opened
this._expandNode(rn).then(lang.hitch(this, function(){
    // Then, select the nodes specified by params.paths[].
    this.rootLoadingIndicator.style.display = "none";
    this.expandChildrenDeferred.resolve(true);
}));

为什么树没有显示？出了什么问题？

【问题讨论】：

你能用你的代码创建一个小提琴吗？
不容易。我正在将一个基于 Dijit 的复杂项目从 1.8 迁移到 1.9，这只是其中的一小部分。
你能把整个小部件的代码贴出来吗？
这可能是一个愚蠢的问题，但你打电话给 PilotTree.startup(); ?
在我看来，这与以意外/错误顺序触发的事件有关。从文档中，_Widget 接口 .startup() 仅在添加第一个子元素时调用，它应该是 this.pilotTreeContainer.set( 'content', pilotTree );。是否有可能将树代码移动到单独的小部件并在之前对其进行初始化？也许pilotTree.startup() 正是 AJD 建议的需要。请参阅dojotoolkit.org/reference-guide/1.10/dijit/_WidgetBase.html 并在此处进行更详尽的描述：dojotoolkit.org/documentation/tutorials/1.6/…

标签： javascript dojo dijit.layout dijit.tree

【解决方案1】：

回到这个问题（希望它会在 Dojo 1.10 中得到解决），我找到了解决方法。

我将树抽象成它自己的模块，用placeAt()而不是this.pilotTreeContainer.set( 'content', pilotTree );将它添加到容器中：

// dijit/Tree implementation for pilots
pilotTree = new PilotTree( 
{
    model: treeModel 
} );


// add to container
pilotTree.placeAt( this.pilotTreeContainer.containerNode ); 
pilotTree.startup();

然后强制它在树的startup() 方法中显示其内容：

startup: function()
{
    this.inherited( arguments );

    // force show!
    this.rootLoadingIndicator.style.display = "none";
    this.rootNode.containerNode.style.display = "block";
},

【讨论】：