如何使用 Dojo 动态创建自定义列表项？

Question

您可以 copy/paste 在记事本或其他任何地方输入以下代码：

<!DOCTYPE HTML>
    <html>
    <head>
    <title>index</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum- scale=1,minimum-scale=1,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" data-dojo-config="async: true"></script>
   <script type="text/javascript">
   require(["dojox/mobile/parser",
            "dijit/registry",
            "dojox/mobile/deviceTheme",
            "dojox/mobile",
            "dojo/domReady!"],function(parser,registry){
             parser.parse();
             var list = registry.byId("list");
             for(var i = 0;i < 18;i++){
                var childWidget = new dojox.mobile.ListItem({id:"item"+i,  
                                                          label:"ITEM"+i});

                list.addChild(childWidget);

             }
             document.getElementById("item0").style.backgroundColor = "red"; 
             document.getElementById("item1").style.backgroundColor = "green"; 

           });
    </script>




  </head>
  <body>

  <div id="settings" data-dojo-type="dojox.mobile.View" data-dojo-props="selected: true">

  <!-- a sample heading -->
  <h1 data-dojo-type="dojox.mobile.Heading">Settings</h1>

  <!-- a rounded rectangle list container -->
  <ul data-dojo-type="dojox.mobile.RoundRectList" id="list">
  </ul>
  </div>

  <div id="article" data-dojo-type="dojox.mobile.View">

    <!-- a sample heading -->
    <h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props='back: "settings",moveTo: "settings"'>Article</h1>

    This is the article view
  </div>
  </body>
  </html>

然而，我正在努力处理的代码部分是：

   <script type="text/javascript">
   require(["dojox/mobile/parser",
            "dijit/registry",
            "dojox/mobile/deviceTheme",
            "dojox/mobile",
            "dojo/domReady!"],function(parser,registry){
             parser.parse();
             var list = registry.byId("list");
             for(var i = 0;i < 18;i++){
                var childWidget = new dojox.mobile.ListItem({id:"item"+i,  
                                                          label:"ITEM"+i});

                list.addChild(childWidget);

             }
             document.getElementById("item0").style.backgroundColor = "red"; 
             document.getElementById("item1").style.backgroundColor = "green"; 

           });
    </script>

如您所见，ListItem 是这样动态创建的：

var childWidget = new dojox.mobile.ListItem({id:"item"+i,label:"ITEM"+i});

我想做的是在创建 ItemList 时添加背景色，而不是在创建之后添加背景色，因为您可以看到 "red" 和 "green" 两行。

所以我正在寻找这样的东西:

var childWidget = new dojox.mobile.ListItem({id:"item"+i,label:"ITEM"+i,style=????});

但是没有这样的风格属性.

属性 here 顺便说一句。

可以吗？

提前致谢。

Answer 1

首先，我建议您将 ListItem 添加到您的 AMD 依赖项列表中，并像使用任何其他 AMD 模块一样使用它：

require(["dojox/mobile/ListItem"], function(ListItem) {
   new ListItem(...);
});

而不是通过旧的 dojox.mobile 表示法。

对于您的样式问题，您所暗示的解决方案实际上可以应用，ListItem 正在继承 dijit/_WidgetBase，因此将支持样式属性。像下面这样的东西应该可以工作：

new ListItem({id: "theid", label: "thelabel", style: "background-color: red"});

如何使用 Dojo 动态创建自定义列表项？

How to create custom List item dynamically with Dojo?

javascript

dojo