Dojo 动态创建 DOM 节点

发布于 2024-12-15 05:25:12 字数 872 浏览 0 评论 0原文

我正在尝试为我的应用程序创建一个自定义 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 手动为 News 的每个值创建 DOM。但这需要大量的硬编码。您能建议我最好的方法吗？是否可以在 Widget 模板本身中执行此操作？

原文

I'm trying to create a custom Dojo widget for my application.

<!-- 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>

This widget is to display the list of News that I get from my service.I will get the Data in JSON format. I need to display the News Text in the anchor tag whose class is wordWrap and the link to the news as the href of this anchor tag.

Since there can be multiple news, I need to repeat for each News. I would like to do this in the best way. I can manually create the DOM for each value of News using dojo.create or dojo.place.But that requires lot of hard coding. Could you please suggest me the best way to do this? Is it possible to do that in the Widget template itself?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

煞人兵器 2024-12-22 05:25:12

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

例如

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);

The simplest way would be to create a private templated widget that represents an individual news item.

for example

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

Then when you retrieve the list of news from your data service, you can just iterate over each element of that array and create a new NewsItem widget and place it in the your 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);

回复收藏 0 原文

~没有更多了~