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。

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

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