dojo ListItem：调整大小时显示样式更改

Question

我很抱歉，但我无法提供有效的 jsFiddle sn-p。如果我了解如何将下面的代码放入其中，我将更新问题。

使用dojox/mobile 我用自定义ListItems 填充EdgeToEdgeStoreList。一些代码：

html（翡翠）

div(data-dojo-type="dojox/mobile/View")
    h1(data-dojo-type="dojox/mobile/Heading") Device List
    div(data-dojo-type="dojox/mobile/ScrollablePane")
        ul#list(data-dojo-type="dojox/mobile/EdgeToEdgeStoreList" data-dojo-props="itemRenderer: DeviceListItem, select: 'single'")

js

var store;
var list = registry.byId("listDevices");
var devices = JSON.parse("a string received from server");

store = new Memory({data: devices, idProperty: "label"});
list.setStore(store);

设备列表项

define([
    "dojox/mobile/ListItem",
    "dijit/_TemplatedMixin",
    "dojo/_base/declare"
], function (ListItem, TemplatedMixin, declare) {
    var template =
        "<div class='deviceDone${done}'>" +
        "       ${id} - <div style='display: inline-block;' data-dojo-attach-point='labelNode'></div>" +
        "       <div class='deviceCategory'>${category}</div>" +
        "</div>";

    TemplatedListItem = declare("DeviceListItem",
        [ListItem, TemplatedMixin], {
            id: "",
            label: "",
            category: "",
            done: "false",
            templateString: template
        }
    );
});

它工作正常，即我会看到我的自定义ListItems。 但是，如果我调整窗口大小（在桌面浏览器上）或更改方向（在移动浏览器上），则只有 ${id} 字段仍然可见。其他人（label 和 category）消失了。所有浏览器的行为都是相同的（我尝试过）。

调试后我发现了以下内容。在调整大小之前，ListItem 的实际 html 看起来像这样：

<div id="item1728" class="deviceDoneFalse mblListItem mblListItemUnchecked" tabindex="0" widgetid="item1728" aria-selected="false" role="option">
    item1728 - 
    <div style="display: inline-block;" data-dojo-attach-point="labelNode">n.a.</div>
    <div class="deviceCategory">General purpose</div>
</div>

它就像模板字符串。调整大小后，内部div 变为：

<div style="display: block;" data-dojo-attach-point="labelNode">n.a.</div>

没有“内联”，所有布局都会混乱，因此字段“消失”（实际上是在下一行后面）。

我想知道为什么会发生这种情况 - 显示样式被硬编码到模板字符串中！

此外，我在运行时检查了 CSS 规则，这不是因为它们，而是 html 发生了变化——确实如此。

Answer 1

ListItem（dojox/Mobile/ListItem.js中的源码）有如下功能：

resize: function(){
    if(this.variableHeight){
        this.layoutVariableHeight();
    }

    // labelNode may not exist only when using a template (if not created by an attach point)
    if(!this._templated || this.labelNode){
        // If labelNode is empty, shrink it so as not to prevent user clicks.
        this.labelNode.style.display = this.labelNode.firstChild ? "block" : "inline";
    }
},

此函数在调整大小后调用，如您所见，将 labelNode 显示样式设置为“块”。

您可以在定义 DeviceListItem 时替换此函数，保持原始源不变，但更改显示样式。