Question

我正在尝试为我的应用程序创建自定义Dojo小部件。

<!-- Dojo widget Template  -->
<div class="newsHomeWidget">
    <table width="100%" cellspacing="0" cellpadding="0">
        <tbody dojoAttachPoint="newsHomeTableTbody">
            <!-- May be we need to repeat this code dynamically -->
            <tr>
                <td class="ncmseparate">
                    <a class="wordwrap" dojoAttachPoint="newsHomeLink"></a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

此小部件用于显示我从服务中获取的新闻列表。我将以JSON格式获取数据。我需要在类标记为wordWrap的锚标记中显示新闻文本，并将新闻链接显示为此锚标记的href。

由于可能有多个新闻，我需要重复每个新闻。我想以最好的方式做到这一点。我可以使用dojo.create或dojo.place为每个新闻值手动创建DOM。但这需要大量的硬编码。你能告诉我最好的方法吗？是否可以在Widget模板中执行此操作？

Answer 1

最简单的方法是创建一个代表单个新闻项的私有模板化小部件。

例如

dojo.declare('NewsItem',[dijit._Widget,dijit._Templated],{
  url:'',
  headline:'',
  //template abbreviated
  templateString:'<tr><td><a href="${url}>${headline}</a></td></tr>'
});

然后，当您从数据服务中检索新闻列表时，您可以迭代该数组的每个元素并创建一个新的NewsItem小部件并将其放在您的tbody this.newsHomeTableTbody中。

var newsArray = [...]
dojo.forEach(newsArray, function(newsLink){
  var newsItem = new NewsItem({
    url: newsLink.url,
    headline: newsLink.headline
  });
  newsItem.placeAt(this.newsHomeTableTbody);

},this);

Dojo动态创建DOM节点

1 个答案: