我正在尝试实现dojox.mobile.ContentPane来解析html中的内容。但是,根本没有显示任何文本。以下是我要由dojox.mobile.ContentPane解析的html到文件(文件名:fragment1.html):
<div data-dojo-type='dojox.mobile.RoundRect' shadow='true'>
HTML fragment example
</div>
这是我的index.html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>dojox/mobile Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" data-dojo-config="async: true"></script>
<script type="text/javascript">
require(["dojox/mobile/parser", "dojox/mobile", "dojox/mobile/deviceTheme", "dojox/mobile/compat", "dojo/domReady!","dojox/mobile/ContentPane", "dojox/mobile/RoundRect", "dojox/mobile/RoundRectCategory"], function(parser) {
parser.parse();
});
</script>
</head>
<body>
<div id="main" data-dojo-type="dojox.mobile.View" data-dojo-props="selected: true">
<h1 data-dojo-type="dojox.mobile.Heading">Main Menu</h1>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="moveTo: 'view-content'">
View Content
</li>
</div>
<div id="view-content" data-dojo-type="dojox.mobile.View">
<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="back:'Main Menu', moveTo:'main'">This is sample content</h1>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Pane1</h2>
<div id="pane1" data-dojo-type="dojox.mobile.ContentPane" content="<div data-dojo-type='dojox.mobile.RoundRect' shadow='true'>Thank you!</div>"></div>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Pane2</h2>
<div id="pane2" data-dojo-type="dojox.mobile.ContentPane" href="fragment1.html"></div>
</div>
</body>
</html>
有人有解决方案吗?谢谢
您的片段看起来与文档非常相似!我认为这里发生的事情是,您的parser.parse()
行可能执行得太早;在ContentPane小部件获取外部HTML内容并将其插入DOM之前。您是否尝试过使用调试器来查看加载后DOM中的实际内容?控制台里有什么?
不管怎样,我认为您可能需要打开ContentPane上的parseOnLoad: true
属性(请参阅文档)。看起来你想怎么做就怎么做。