Question

我正在尝试将dojox.mobile.ListItem动态添加到dojox.mobile.RoundRectList中，并且正在努力应对相对简单的事情。

这是我的dojo小部件：

<ul data-dojo-type="dojox.mobile.RoundRectList" id="theTable" >
        <li data-dojo-type="dojox.mobile.ListItem"
            data-dojo-props='icon:"images/i-icon-1.png",
                            moveTo:"#article",
                            variableHeight:true' 
            id="theItem">
            text here
        </li>
    </ul>

我有一些javascript，我试图抓住RoundRectList的句柄，并在其中添加一些ListItem：

dojo.require("dojox.mobile.parser");
dojo.require("dojox.mobile");
dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");
var theTable = dojo.byId("theTable");
var childWidget = new dojox.mobile.ListItem({
                   id:"item1", 
                   icon:"images/icon.png", 
                   rightText:"Off", 
                   moveTo:"bar", 
                   label:"u1space"});
theTable.addChild(childWidget);

这似乎不起作用，特别是在Chrome的Javascript控制台中显示以下错误：

未捕获的TypeError：无法调用未定义的方法'addChild'

有人可以告诉我这里我做错了什么吗？基本上，我有一个JSON对象，我试图迭代并将元素放入列表。

由于

Answer 1

要访问dojo小部件，您需要使用dijit.byId NOT dojo.byId。 dojo.byId用于访问未被widgetized的DOM节点。我在下面提供了一个示例，但我建议查看dojox.mobile.RoundRectDataList而不是普通的dojox.mobile.RoundRectList。数据列表版本由dojo.data.store支持，可以更轻松地动态更新 - http://livedocs.dojotoolkit.org/dojox/mobile/RoundRectDataList

    <!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");
             var childWidget = new dojox.mobile.ListItem({id:"item1", 
                                                              icon:"images/icon.png", 
                                                              rightText:"Off", 
                                                              moveTo:"bar", 
                                                              label:"u1space"});
             list.addChild(childWidget);
           });
    </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">

     <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"article"' id="theItem">
        Go to Article view
    </li>
  </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>

Answer 2

我并不是100％确定这是否是造成问题的原因，但您应该使用Dojo API（特别是dojo.place）将此ListItem放在列表中而不是使用JavaScript / DOM API 。 e.g。

dojo.place(childWidget.domNode, theTable)

http://dojotoolkit.org/reference-guide/1.7/dojo/place.html

Answer 3

错误消息似乎是说你的theTable变量没有指向带有addChild（）函数的对象 - 暗示dojo.byId（）失败了。

我建议先检查桌面上的内容。

为了比较，我有工作代码做你想做的事情，但我使用的是一个略有不同的习语：

我正在创建一个自己的Widget，所以我使用了一个attachPoint - dapTaskList来获取我放置列表的位置，并从头开始创建列表。

var ul  = new RoundRectList({}, domConstruct.create("ul",{}, this.dapTaskList) );
ul.startup();

然后我添加代码如下的项目：

        li = new ListItem({
          "label"          : "xx",
          "rightText"      : 997, 
          "class"          : "subTotalListItem"
        }, domConstruct.create("li",{}, ul.domNode) );
        li.startup();

如何动态地将dojox.mobile.ListItem添加到RoundRectList？

3 个答案: