Dojo 和 Ajax - 渲染小部件
Posted
技术标签:
【中文标题】Dojo 和 Ajax - 渲染小部件【英文标题】：Dojo and Ajax - rendering widgets 【发布时间】：2010-12-29 02:45:37 【问题描述】：我正在尝试将内容加载到特定 html 标记中的 Dojo 内容窗格中，而不是替换整个内容窗格。我正在加载的 html 包含一个标记定义的小部件，我希望在加载新行时呈现该小部件。
所以，我有一个通过 ajax 动态填充的表格，即：
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
djConfig="parseOnLoad: true, isDebug:true"></script>
<div id="table-pane" dojoType="dijit.layout.ContentPane">
<table class="test">
<tbody>
<tr><td>Name</td><td>Year</td><td>Age</td></tr>
<tr>
<td><span dojoType="dijit.InlineEditBox" editor="dijit.form.Textarea">Mike</span>
</td>
<td>2010</td>
<td>12</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
var html ='<tr><td><span dojoType="dijit.InlineEditBox" editor="dijit.form.Textarea">John</span></td><td>2011</td><td>22</td></tr>';
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.InlineEditBox");
dojo.require("dijit.form.Textarea");
dojo.addOnLoad(function()
pane = dijit.byId("table-pane");
add_elem();
);
function add_elem()
var node = $(".test tr:last");
node.after(html);
dojo.addOnLoad(function()
//Here I want to initiate any widgets that haven't been initiated
pane.buildRendering();
);
</script>
如何在新表格行中呈现 Dojo 小部件？
【问题讨论】：
【参考方案1】：ContentPane 将使用 setContent 呈现内容集中的小部件。如前所述，您还可以在使用 dojoType 添加节点后将 dojo 解析器指向特定的 DOM 节点。但是，如果您在代码中做所有事情，为什么不使用程序化方法而不是声明性方法呢？
使用你的例子变成这样，
<html>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
djConfig="parseOnLoad: true, isDebug:true"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="table-pane" dojoType="dijit.layout.ContentPane">
<table class="test">
<tbody>
<tr><td>Name</td><td>Year</td><td>Age</td></tr>
<tr>
<td><span dojoType="dijit.InlineEditBox" editor="dijit.form.Textarea">Mike</span>
</td>
<td>2010</td>
<td>12</td>
</tr>
</tbody>
</table>
</div>
<script>
var html ='<tr><td><span id="target">John</span></td><td>2011</td><td>22</td></tr>';
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.InlineEditBox");
dojo.require("dijit.form.Textarea");
dojo.addOnLoad(function()
var node = $(".test tr:last");
node.after(html);
new dijit.InlineEditBox(
editor: "dijit.form.Textarea",
autoSave: true
, dojo.byId('target'));
);
</script>
</body>
</html>
如果您仍然使用 Dojo，您也可以使用 dojo.query 代替 jQuery 来定位和操作节点。例如，
dojo.query(".test tr:last-child");
【讨论】：
我在使用 dojo.parser.parse() 时遇到了问题。当我多次调用该函数时，它试图用页面上已经使用的小部件 ID 实例化新的 textAreas。 看起来我的问题是选择器错误地选择了一个已经被渲染的小部件。【参考方案2】：这应该会有所帮助： dojo.parser.parse(domnode?)
但我认为某些小部件（例如 dijit.layout.contentpane）会自动解析加载的 dom 片段。包含的小部件必须是 dojo.required 之前！
【讨论】：
以上是关于Dojo 和 Ajax - 渲染小部件的主要内容，如果未能解决你的问题，请参考以下文章