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

Question

我道歉，但我无法提供有效的jsFiddle代码段。如果我理解如何将代码放在其中，我将更新问题。 使用dojox / mobile我使用自定义ListItem填充EdgeToEdgeStoreList。一些代码： html（玉） DIV（数据道场型=＆＃34; DojoX中/移动/查看＆＃34）     h1（data-dojo-type =＆＃34; dojox / mobile / Heading＆＃34;）设备列表     DIV（数据道场型=＆＃34; DojoX中/移动/ ScrollablePane＆＃34）         ul＃list（data-dojo-type =＆＃34; dojox / mobile / EdgeToEdgeStoreList＆＃34; data-dojo-props =＆＃34; itemRenderer：DeviceListItem，select：＆＃39; single＆＃39;＆＃34; ） JS var store; var list = registry.byId（＆＃34; listDevices＆＃34;）; var devices = JSON.parse（＆＃34;从服务器接收的字符串＆＃34;）; store = new Memory（{data：devices，idProperty：＆＃34; label＆＃34;}）; list.setStore（存储）; DeviceListItem 限定（[     ＆＃34; DojoX中/移动/列表项＆＃34 ;,     ＆＃34;的dijit / _TemplatedMixin＆＃34 ;,     ＆＃34;道场/ _base /声明＆＃34; ]，function（ListItem，TemplatedMixin，declare）{     var template =         ＆＃34;＆lt; div class =＆＃39; deviceDone $ {done}＆＃39;＆gt;＆＃34; +         ＆＃34; $ {id} - ＆lt; div style =＆＃39; display：inline-block;＆＃39;数据道场-连接点=＆＃39; labelNode＆＃39;＆GT;＆LT; / DIV＆GT;＆＃34; +         ＆＃34; ＆lt; div class =＆＃39; deviceCategory＆＃39;＆gt; $ {category}＆lt; / div＆gt;＆＃34; +         ＆＃34;＆LT; / DIV＆GT;＆＃34 ;;     TemplatedListItem = declare（＆＃34; DeviceListItem＆＃34;，         [ListItem，TemplatedMixin]，{             id：＆＃34;＆＃34;，             标签：＆＃34;＆＃34;，             类别：＆＃34;＆＃34;，             完成：＆＃34; false＆＃34;，             templateString：template         }     ）; }）; 它工作正常，就是我会看到我的自定义ListItems。 但是，如果我调整窗口大小（在桌面浏览器上）或更改方向（在移动窗口上），只有$ {id}字段仍然可见。其他（标签和类别）消失。所有浏览器（我尝试过）的行为都是一样的。 调试后我发现了以下内容。在任何调整大小之前，ListItem的实际html如下所示： ＆lt; div id =＆＃34; item1728＆＃34; class =＆＃34; deviceDoneFalse mblListItem mblListItemUnchecked＆＃34;的tabindex =＆＃34; 0＆＃34;为widgetid =＆＃34; item1728＆＃34;咏叹调选定=＆＃34;假＆＃34;角色=＆＃34;选项＆＃34;＆GT;     item1728 -     ＆lt; div style =＆＃34; display：inline-block;＆＃34;数据道场-连接点=＆＃34; labelNode＆＃34;＆GT; N.A.＆LT; / DIV＆GT;     ＆lt; div class =＆＃34; deviceCategory＆＃34;＆gt;通用＆lt; / div＆gt; ＆LT; / DIV＆GT; 它就像模板字符串。调整大小后，内部div变为： ＆lt; div style =＆＃34; display：block;＆＃34;数据道场-连接点=＆＃34; labelNode＆＃34;＆GT; N.A.＆LT; / DIV＆GT; 没有＆＃34;内联＆＃34;所有的布局都会搞乱，因此字段会消失掉＃34; （实际上在下一行后面）。 我想知道为什么会这样 - 显示样式被硬编码到模板字符串中！ 此外，我在运行时检查了CSS规则，并不是由于它们，它确实是改变了的html。

Answer 1

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

<div id="text" contenteditable="true">a<img src="https://www.splitbrain.org/_static/ico/circular/ico/add.png"/><img src="https://www.splitbrain.org/_static/ico/circular/ico/add.png"/><img src="https://www.splitbrain.org/_static/ico/circular/ico/add.png"/><img src="https://www.splitbrain.org/_static/ico/circular/ico/add.png"/>b<img src="https://www.splitbrain.org/_static/ico/circular/ico/add.png"/>cdefghijkl<img src="https://www.splitbrain.org/_static/ico/circular/ico/add.png"/>mnopq<img src="https://www.splitbrain.org/_static/ico/circular/ico/add.png"/>rst<img src="https://www.splitbrain.org/_static/ico/circular/ico/add.png"/>uvw<img src="https://www.splitbrain.org/_static/ico/circular/ico/add.png"/>xyz<img src="https://www.splitbrain.org/_static/ico/circular/ico/add.png"/></div>

在调整大小后调用此函数，您可以看到将labelNode显示样式设置为＆＃34; block＆＃34;。

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