Dojo BorderContainer小部件不会呈现

时间:2012-11-01 14:48:21

标签: ruby ruby-on-rails-3 dojo

我用Maqetta创建了一个布局。现在我想将逻辑添加到布局中。因此,我从Maqetta下载了整个工作区,并将文件/库导入到新的Rails项目中。起初我遇到了一些问题,Rails没有加载dojo,js文件,但我已经解决了这个问题。
现在我有另一个问题。该页面不会呈现。除了一个小部件(按钮)之外,我已经评论了所有内容,这很好用。但如果我撤消这一点,没有任何反应。不幸的是,我也没有从道场得到任何警告/错误或类似的东西 稍作尝试后,我更改了parseOnLoad属性,现在我收到警告:

  

未处理的错误:尝试使用id == appLayout注册小部件,但该ID已经注册

以下是include标记:

<%= javascript_include_tag "lib/dojo/dojo/dojo", :'data-dojo-config' => "'async':true,
        'packages':[{'name':'maqetta','location':'../../maqetta'},{'name':'gridx','location':'../gridx'},{'name':'clipart','location':'../../clipart'},{'name':'shapes','location':'../../shapes'},
        {'name':'maqettaSamples','location':'../../../samples'},{'name':'zazl','location':'../../zazl'},{'name':'widgets','location':'../../custom'}]" %>

这是HTML部分(我简化了它,现在我只是使用教程中的示例):

<body class="claro" data-maq-flow-layout="true" data-maq-ws="collapse" id="myapp" data-maq-appstates="{}">

<input type="button" data-dojo-type="dijit.form.Button" intermediateChanges="false" label="Search" iconClass="dijitNoIcon" onclick="alert('hi');"></input>
<div
id="appLayout" class="demoLayout"
data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design: 'headline'">
    <div
    class="centerPanel"
    data-dojo-type="dijit/layout/ContentPane"
    data-dojo-props="region: 'center'">
        <div>
            <h4>Group 1 Content</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div>
            <h4>Group 2 Content</h4>
        </div>
        <div>
            <h4>Group 3 Content</h4>
        </div>
    </div>
    <div
    class="edgePanel"
    data-dojo-type="dijit/layout/ContentPane"
    data-dojo-props="region: 'top'">Header content (top)</div>
    <div
    id="leftCol" class="edgePanel"
    data-dojo-type="dijit/layout/ContentPane"
    data-dojo-props="region: 'left', splitter: true">Sidebar content (left)</div>
</div>

这是解析器:

require(["dojo/parser","dojo/domReady!"], function(parser){
     parser.parse();
});

我现在已经尝试了几个小时,而且我仍然像开始时一样无能为力。有人知道我可以尝试什么吗?

2 个答案:

答案 0 :(得分:2)

  

未处理的错误:尝试使用id == appLayout注册小部件,但该ID已经注册

此错误是因为您要解析两次。一旦加载,在require语句中第二次。第二个解析将尝试注册具有相同id的第二个窗口小部件,从而出错。

删除其中一个解析调用,并为边框容器指定特定的宽度和高度。

<div id="appLayout" class="demoLayout" 
  data-dojo-type="dijit/layout/BorderContainer"
  data-dojo-props="design: 'headline'"     
  style="width: 800px; height: 400px">

答案 1 :(得分:1)

请参阅http://livedocs.dojotoolkit.org/dijit/layout/BorderContainer#setting-sizeshasLayout为真的最近父级(例如位置:相对)必须设置宽度+高度。另外,设置BorderContainer的宽度+高度。