Question

好的，所以我正在尝试使用类似于以下内容的Dojo 1.8构建一些东西......

<ul class="groups">
  <li class="group">
    <ul class="items">
      <li class="item"></li>
    </ul>
  </li>
</ul>

我为“item”创建了一个简单的TemplatedWidget（我们称之为TypeAItem，但稍后可能会有不同类型的“items”需要不同的模板。

我有代表组的JSON，看起来像这样......

[{
  name: "groupName",
  items: [{ title: "Item 1", type: "someRandomType", otherStuff: {} }]
}]

我的问题是，我不确定构建此嵌套列表的最佳方法是什么。

最初我只是想在Mustache中使用某种循环约定，但Dojo的模板似乎不支持它。然后，在阅读Creating a Custom Widget教程后，我想只使用嵌套的for循环......

var groupHTML="<ul class='groups'>"
for (group in groups) {
  groupHTML += "<li class='group'>";
  for (item in groups.items) {
    ??? 
    // I'm assuming something like var item = new TypeAItem(item);
    //  but I the tutorial only uses the .placeAt(domNode) function
    // So I'm not sure how to get this to work.
  }
  groupHTML += "</li>
}
groupHTML += "</ul>

这很容易，如果我需要一个其他类型的项类型的列表，那么我可以只更改那一行代码，或者更好的是，将其设置为一个函数并只传入代表该代码的小部件项目

由于我不知道如何使其工作，我开始认为我可能需要将组设置到自己的窗口小部件中，然后在postCreate方法中创建项目。但是，我需要弄清楚如何将group.items数组传递给它，以及如何使其足够灵活以便以后处理不同的项目类型。

如果有人可以提供帮助，我会非常感激！

Answer 1

要以编程方式创建domNodes，请在dom-construct中使用create方法。

在您的小部件中，需要：“dojo/dom-construct”作为domConstruct

// create the groups and place it on the page
var groups = domConstruct.create("ul", {'class':'groups'}, this.someAttachPoint, 'last');
 // loop
 var group = domConstruct.create("li", {'class':'group'}, groups, 'last');
  // loop
  var items= domConstruct.create("ul", {'class':'items'}, group , 'last');
   // loop
   var item= domConstruct.create("li", {'class':'item',innerHTML:'item X'}, items, 'last');
   // or instead of innerHTML:  item.textContent = 'Some text'; // (check browser support)

请注意，domConstruct.create不需要在创建节点时放置节点，并且“last”是默认节点。您稍后使用dojo place放置它。此外，您可以使用dojo的数组功能进行循环，这样您就可以创建并创建辅助函数来创建这些节点。

根据这些群组和项目的不同，您可能仍然想要创建子窗口小部件。

另一种方法是使用dojox dtl模板，它允许您在模板中混合循环的代码。这些模板就像django模板一样工作（你需要引用django文档才能弄明白）

如何在dojo 1.8中模拟嵌套的对象数组？

1 个答案: