1

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

这是我的道场小部件：

<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添加一些ListItems：

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 控制台中显示以下错误：

未捕获的类型错误：无法调用未定义的方法“addChild”

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

谢谢

4

3 回答 3

4

要访问 dojo 小部件，您需要使用 dijit.byId 而不是 dojo.byId。dojo.byId 用于访问非小部件化的 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>
于 2012-07-27T15:31:53.527 回答
0

错误消息似乎是在说您的 theTable 变量未指向具有 addChild() 函数的对象 - 暗示 dojo.byId() 已失败。

我建议先检查表中的内容。

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

我正在创建自己的小部件，所以我使用 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();
于 2012-07-26T12:43:22.117 回答
0

我不能 100% 准确地确定这是否是导致您的问题的原因，但您可能应该使用 Dojo API（特别是dojo.place）将此 ListItem 放在列表中，而不是使用 JavaScript/DOM API。例如

dojo.place(childWidget.domNode, theTable)

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

于 2012-07-26T12:26:27.257 回答