View Full Version : SOLVED: Nested XTemplates question (JSON string included)

27 Jan 2010, 10:46 AM
Hi, all...

I'm an Ext JS neophyte, so I apologize right off the bat if/when I miss something obvious. :)

I have a very basic message schema, which allows two levels; root comments and replies to those root comments, (analagous to facebook's approach on the wall). I'm trying to render it using a dataview and nested XTemplates:

BB.netcommunity.commentsList.view = new Ext.DataView({
itemSelector: 'div.thumb-wrap',
style: 'overflow:auto',
autoHeight: true,
width: 700,
store: BB.netcommunity.commentsList.store,
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<li class="BBThonProfileCommentItem">',
'<h4 class="BBThonProfileCommentName">{authorname}</h4>',
'<div class="BBThonProfileCommentText">{commenttext}</div>',
'<div class="BBThonProfileCommentMenu">menu goes here</div>',
'<tpl for="replies">',
'<ul class="BBThonProfileSubCommentList">',
'<li class="BBThonprofileSubCommentItem">',
'<h5 class="BBThonProfileSubCommentName">{authorname}<h5>',
'<div class="BBThonProfileSubCommentText">{commenttext}</div>',
'<div class="BBThonProfileSubCommentMenu">',
'<a class="BBThonProfileSubCommentMenuItem" href="#">MenuItem</a>',
'</div><div class="BBClear"></div>',
'<div class="x-clear"></div>'
Data store:

BB.netcommunity.commentsList.store = new Ext.data.JsonStore({
url: 'components/custom.ashx?handler=BB.AppFx.FAFEvent.Web.GetComments',
fields: ['commentid', 'authorname', 'commenttext', {name:'replies'}],
method: 'POST',
baseParams: {
eventID: '<%=EventID%>',
registrantID: '<%=RegistrantID%>',
teamID: '<%=TeamID%>',
viewMode: '<%=ActiveViewMode%>',
pageType: '<%=ActivePageType%>'
root: 'comments'
JSON string:

{"commentid":"7446cc09-d30a-df11-b369-001c25cafd01","authorname":"","commenttext":"This is the third root-level comment"},{"commentid":"9df17af4-d20a-df11-b369-001c25cafd01","authorname":"","commenttext":"This is the second root-level comment",
{"commentid":"1cbd8703-d30a-df11-b369-001c25cafd01","authorname":"","commenttext":"This is a reply to the second rootlevel"},{"commentid":"1dbd8703-d30a-df11-b369-001c25cafd01","authorname":"","commenttext":"This is a second reply to the second rootlevel"}]},{"commentid":"5c2560e2-d20a-df11-b369-001c25cafd01","authorname":"","commenttext":"This is the first root-level comment","replies":[{"commentid":"e4de2cee-d20a-df11-b369-001c25cafd01","authorname":"","commenttext":"This is a reply to the first rootlevel"},{"commentid":"e5de2cee-d20a-df11-b369-001c25cafd01","authorname":"","commenttext":"This is a second reply to the first rootlevel"},{"commentid":"9cf17af4-d20a-df11-b369-001c25cafd01","authorname":"","commenttext":"This is a third reply to the first rootlevel"}]}]}
What I'm finding is that, even for the first item in the json string, (which doesn't have any nested comments), the nested xtemplate is being rendered. Isn't the nested template ( for="replies") only supposed to render if there is a corresponding value for that key in the store for the given record? Or am I just doing something foolish?

Thank you in advance,

Edit: Just realized that XTemplate takes an if param... I changed my nested template to:

'<tpl if="replies.length &gt; 0" for="replies">',

which resolved the issue. Thanks!