javascript - 道场 ListItem : display style changes on resize

Question

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

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

html ( Jade )

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 显示样式设置为“ block ”。

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