为什么相同的 2 个 jsfiddle 在 1.8 版本中会导致不同的 dojo 布局?
Why do identical 2 jsfiddles result in different dojo layout at 1.8 release?
我正在将一些 dojo 1.6 代码迁移到 dojo 1.8,但我无法让布局表现相同。所以我将代码剥离到最低限度,希望能解决问题并最终得到 2 个相同的 jsfiddle。我将代码从一个复制到另一个......但其中一个导致分裂的 dojo ContentPanes 而另一个没有。
示例 #1(布局有效):http://jsfiddle.net/mmlitvin/3onan361/17/
示例 #2(布局不起作用):http://jsfiddle.net/mmlitvin/Lt0a2fhd/
HTML
<body class="claro">
<div data-dojo-type="dijit.layout.BorderContainer" id="mainBC">
<div data-dojo-type="dijit.layout.BorderContainer" id="splitBC" data-dojo-props="region:'center'">
<div data-dojo-type="dijit.layout.ContentPane" id="topPane" data-dojo-props="region:'top'">SQL Statement and details</div>
<div data-dojo-type="dijit.layout.ContentPane" id="leftPane" data-dojo-props="region:'center'">Left Pane</div>
<div data-dojo-type="dijit.layout.ContentPane" id="rightPane" data-dojo-props="region:'right',splitter:'true',minSize:1" style="width:50%;">Right Pane</div>
</div>
</div>
Javascript
debugger;
dojo.require('dojo.parser');
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.Dialog");
CSS
#mainBC {
height:600px;
}
#topPane {
height: 15px;
border:none;
padding:0px;
}
它们并不相同。如果单击左侧菜单中的 Fiddle Options
,您会注意到工作的 JSFiddle 在 Framework <script> attribute
中包含 djConfig="parseOnLoad:true"
,而另一个包含不是。
JSFiddle documentation 关于此属性的说明如下:
Framework <script> attribute:
An ability to add special attributes to the script tag loading the framework.
That would result with <script type="text/javascript" src="/js/lib/someframework.js" {attributes}></script>
这意味着当页面在您的第二个 JSFiddle 中加载时,dojo/parser
不是 运行。在您的实际代码中,只需将 djConfig="parseOnLoad:true
添加到 <script>
标记即可。
我正在将一些 dojo 1.6 代码迁移到 dojo 1.8,但我无法让布局表现相同。所以我将代码剥离到最低限度,希望能解决问题并最终得到 2 个相同的 jsfiddle。我将代码从一个复制到另一个......但其中一个导致分裂的 dojo ContentPanes 而另一个没有。
示例 #1(布局有效):http://jsfiddle.net/mmlitvin/3onan361/17/
示例 #2(布局不起作用):http://jsfiddle.net/mmlitvin/Lt0a2fhd/
HTML
<body class="claro">
<div data-dojo-type="dijit.layout.BorderContainer" id="mainBC">
<div data-dojo-type="dijit.layout.BorderContainer" id="splitBC" data-dojo-props="region:'center'">
<div data-dojo-type="dijit.layout.ContentPane" id="topPane" data-dojo-props="region:'top'">SQL Statement and details</div>
<div data-dojo-type="dijit.layout.ContentPane" id="leftPane" data-dojo-props="region:'center'">Left Pane</div>
<div data-dojo-type="dijit.layout.ContentPane" id="rightPane" data-dojo-props="region:'right',splitter:'true',minSize:1" style="width:50%;">Right Pane</div>
</div>
</div>
Javascript
debugger;
dojo.require('dojo.parser');
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.Dialog");
CSS
#mainBC {
height:600px;
}
#topPane {
height: 15px;
border:none;
padding:0px;
}
它们并不相同。如果单击左侧菜单中的 Fiddle Options
,您会注意到工作的 JSFiddle 在 Framework <script> attribute
中包含 djConfig="parseOnLoad:true"
,而另一个包含不是。
JSFiddle documentation 关于此属性的说明如下:
Framework <script> attribute:
An ability to add special attributes to the script tag loading the framework.
That would result with <script type="text/javascript" src="/js/lib/someframework.js" {attributes}></script>
这意味着当页面在您的第二个 JSFiddle 中加载时,dojo/parser
不是 运行。在您的实际代码中,只需将 djConfig="parseOnLoad:true
添加到 <script>
标记即可。