dojox / мобильный / Значок, не отображаемый в пользовательском списке

#mobile #dojo #listitem #badge

#Мобильный #dojo #список #значок

Вопрос:

Это мой шаблон для пользовательского 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);

1. Используете ли вы / создаете ли виджет? можете ли вы опубликовать фрагмент кода вашего js / виджета?

2. Я просто пытаюсь использовать свой пользовательский список в EdgeToEdgeStoreList. Я добавлю немного другого кода к своему вопросу. Если этого недостаточно, пожалуйста, спросите!

Ответ №1:

Вам не хватает расширения _WidgetsInTemplateMixin , этот микс сообщает системе шаблонов, что в вашем шаблоне есть другие виджеты, и чтобы они создавались при создании экземпляра вашего виджета. Вы можете прочитать об этом здесь.

Пример того, как вы можете использовать это в своем коде, читайте в комментариях:

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