How to append data into a container

[choXberg]

I 'd like to append data to a container (endless scroll).

i am already using a compiled directive, but the container will be
replaced with the result of the render method.

<div class="hidden">
<ul id = "id-search-results-template">
<li>
<div class="search-result-image">
<a>
<img />
</a>
</div>
<div class="search-result-data">
<div class="search-result-title"></div>
<div class="search-result-list-price"></div>
</div>
</li>
</ul>
</div>
<ul id="id-search-results-target">
<li>
</li>
</ul>

pure directive:

var _pure_directive =
{
'@id':'"id-search-results-target"',
'li' :
{
'ProductSearchResult<-RSProductSearchResult' :
{
'.search-result-title' : 'ProductSearchResult.Title',
'.search-result-list-price' :
'ProductSearchResult.ListPriceFormatted',
'.search-result-image a@href' : 'ProductSearchResult.UrlDetail',
'.search-result-image img@src' :
'ProductSearchResult.ImageMedium.Url'
}
}
};

the action:
$('#id-search-results-target').render(data, _pure_directive);

is there a way to append the resultset to the container?

thank you

[Mic (BeeBole)]

I would do it this way:

1) clone the UL in memory
2) render your template with the new data on that UL
3) make a document fragment
4) appendChild the childNodes of the rendered UL to the doc fragment
5) appendChild de doc fragment to the original UL in the DOM
6) restart when new data arrives

[choXberg]

Hello Mic,

thank you for helping me.
i solved the problem (not the clean way) with one more container (pure
temp. target container, hidden).
after rendering, i append the result to the visible container with $
("target-list").append( "tmp-list".children('li'));
when a new search starts, i simply clean the visible list with $
("target-list").empty();

not a beautiful solution...maybe is should better render json
myself...