3

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

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

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

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

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

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

最初我只是想在 Mustache 中使用某种循环约定，但 Dojo 的模板似乎不支持这种做法。然后，在阅读了创建自定义小部件教程后，我只想使用嵌套的 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 数组传递给它，以及如何使其足够灵活，以便以后处理不同的项目类型。

如果有人可以提供帮助，我将不胜感激！

4

1 回答 1

4

要以编程方式创建 domNode，请使用 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 文档来弄清楚）

于 2013-02-12T03:30:23.450 回答