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，我想用rightText替换原来的Badge。

这是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（jade）代码：

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中呈现

更新

1 个答案: