dojox/mobile/Badge 未在自定义 ListItem 中呈现

Question

这是我的自定义模板 ListItem:

var template =
    "<div>" +
    "       <div style='display: inline;' data-dojo-attach-point='labelNode'></div>" +
    "       <div data-dojo-type='dojox/mobile/Badge' data-dojo-props='value:${size}' style='display: inline; position: absolute; right: 100px;'></div>" +
    "</div>";

正确创建了html，即：

<div data-dojo-type="dojox/mobile/Badge" data-dojo-props="value:37" style="display: inline; position: absolute; right: 100px;"></div>

但它在页面上不可见。我试图在页面的其他地方放置完全相同的代码并且它起作用了。

更新

一些其他代码和信息。我有一个 dojox/mobile/EdgeToEdgeStoreList，我想使用我的自定义 ListItem 而不是默认的。例如，我在属性上设置了 background-color，我想用 Badge.

替换原来的 rightText

这是CustomListItem的完整代码：

define([
    "dojox/mobile/ListItem",
    "dijit/_TemplatedMixin",
    "dojox/mobile/Badge",
    "dojo/_base/declare"
], function (ListItem, TemplatedMixin, Badge, declare) {
    var template =
        "<div class='areaDone${done}'>" +
        "       <div style='display: inline;' data-dojo-attach-point='labelNode'></div>" +
        "       <div data-dojo-type='dojox/mobile/Badge' data-dojo-props='value:${size}' style='display: inline; position: absolute; right: 100px;'></div>" +
        "</div>";

    TemplatedListItem = declare("CustomListItem",
        [ListItem, TemplatedMixin], {
            label: "My label",
            size: "0",
            templateString: template
        }
    );
});

这里是html（翡翠）代码：

h2(data-dojo-type="dojox.mobile.RoundRectCategory") List
    #panel(data-dojo-type="dojox/mobile/ScrollablePane")
        ul#list(data-dojo-type="dojox/mobile/EdgeToEdgeStoreList" data-dojo-props="itemRenderer: CustomListItem, itemMap: {Desc: 'label', size: 'size'}, select: 'single'")

最后，用于填充列表的js：

store = new Memory({data: JSON.parse(data), idProperty: "Desc"});
list.setStore(store);

Answer 1

您缺少从 _WidgetsInTemplateMixin 扩展，此 mixin 告诉模板系统您的模板中有其他小部件，并在实例化小部件时实例化它们。你可以 read about it here.

如何在代码中使用它的示例，请阅读评论：

define([
    "dojox/mobile/ListItem",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin", //Include this module
    "dojox/mobile/Badge",
    "dojo/_base/declare"
], function (ListItem, TemplatedMixin, _WidgetsInTemplateMixin, Badge, declare) {
    var template =
        "<div class='areaDone${done}'>" +
        "       <div style='display: inline;' data-dojo-attach-point='labelNode'></div>" +
        "       <div data-dojo-type='dojox/mobile/Badge' data-dojo-props='value:${size}' style='display: inline; position: absolute; right: 100px;'></div>" +
        "</div>";

    TemplatedListItem = declare("CustomListItem",
        [ListItem, TemplatedMixin, _WidgetsInTemplateMixin/*Extend*/], {
            label: "My label",
            size: "0",
            templateString: template
        }
    );
});

dojox/mobile/Badge 未在自定义 ListItem 中呈现

dojox/mobile/Badge not rendered in custom ListItem

mobile

dojo

listitem

badge

更新