Dojo 小部件无法正确呈现

Question

我正在使用 Eclipse Mars 4.5.0 和 MobileFirst Studio 7.1 插件。

我正在使用内置的 dojo 库并遵循 IBM 知识中心的文档：https://www-01.ibm.com/support/knowledgecenter/SSZH4A_6.2.0/com.ibm.worklight.dev.doc/wl_studio_tools/topics/cdojolibprjsetupwl.html

我在浏览器上查看应用程序时无法查看任何 dojo 小部件。正确呈现 Dojo 移动小部件；我有一个滑块、单选按钮和圆角矩形窗格。在下图中，我尝试放置一个 dojo 日期文本框和一个货币字段，但它们无法正确呈现。

感谢任何建议和帮助

Answer 1

似乎没有加载 dijit 主题。

尝试将主题包含在您应用程序的 index.html 文件中：

<link rel="stylesheet" href="dijit/themes/claro/claro.css">

确保您的 www 文件夹中有主题和图标文件夹（www/digit/themes/claro 和 www/digit/icons）

在您提供的项目中，我没有在索引中看到 CurrencyTextBox 或 DateTextBox 小部件。

但要使这些小部件正常工作，请确保将模块包含在 main.js 中的 dojoInit() 函数中：

function dojoInit() {
    require([ "dojo/ready", "dojo/parser", "dojox/mobile", "dojo/dom", "dijit/registry", "dojox/mobile/ScrollableView", 
        "dijit/form/CurrencyTextBox", "dijit/form/DateTextBox"], 
        function(ready) {
           ready(function() {
        });
    });
}

在你的索引中你应该有这样的东西：

<body style="display: none;" class="claro">
        <div data-dojo-type="dojox.mobile.ScrollableView" id="view0" data-dojo-props="selected:true">
        <!--application UI goes here-->
        <label for="income1">U.S. Dollars</label>
        <input type="text" name="income1" id="income1" value="54775.53" required="true" 
        data-dojo-type="dijit/form/CurrencyTextBox" data-dojo-props="constraints:{fractional:true},currency:'USD', invalidMessage:'Invalid amount. Cents are required.'" />
        <br>
        <label for="date1">Drop down Date box:</label>
        <input type="text" name="date1" id="date1" value="2005-12-30"
        data-dojo-type="dijit/form/DateTextBox"
        required="true" />
    </div>
    <script src="js/initOptions.js"></script>
    <script src="js/main.js"></script>
    <script src="js/messages.js"></script>
</body>

（不要忘记将主题 class 名称添加到父 <body> 元素）

希望对您有所帮助

Dojo 小部件无法正确呈现

Dojo widgets not rendering correctly

javascript

dojo

ibm-mobilefirst