Pure Rendering Embedded HTML and then adding the embedded HTML to next part of the loop.

[imagine]

This is a tricky one essentially we have something like this. This
renders a list from a json call. The problem is the item3 text has the
potential to included embedded html for example <em>This Item should
be bold</em> More description.


.directives({
'.item-list':{
'group<-item-group' : {
'.item1@href' : function() {
return getWebGroupUrl(this);
},
'.item2@href' : function() {
return getWebGroupUrl(this);
},
'.item3' : function() {
return
trimGroupPreviewText(this.previewText);
},
'.item4' : function() {
return getBalanceText(this);
}
}
})
.render(data);


So the output looks something like this

<ul>
<li><em>This item should be italics</em> More description</li>
</ul>

What I've noticed is things start to render oddly and when I looked at
the output in firebug I noticed that it seems like pure is picking up
the html element in the loop and adding it to the next li. So
eventually the output is a mess and items don't close correct.

<ul>
<li><em>Get of term life coverage for less than per month. Request a
free persona...</em></li>
</ul>

<ul>
<em> <li>Another new lines of text</li></em>
</ul>

The second list item has no EM but it is now being added after the
first list item.. and this continues all through the iteration.

[Mic (BeeBole)]

Can you make a complete example with a JSON, HTML and directive?

Here it is a bit difficult to guess what happens.

One remark, you can simplify your directives:

'.item3' : function() { return trimGroupPreviewText(this.previewText); }

with

'.item3' : trimGroupPreviewText

And inside trimGroupPreviewText  reference the parameter this.previewText

[Preston McCauley]

So after taking a more in-depth look at the code something caught my
eye. We have a custom trim function. Soon as I removed this things
went back to normal.

On Feb 29, 2:56 am, "Mic (BeeBole)" <m...@beebole.com> wrote:
> Can you make a complete example with a JSON, HTML and directive?
> Here it is a bit difficult to guess what happens.
>
> One remark, you can simplify your directives:
> '.item3' : function() { return trimGroupPreviewText(this.previewText); }
> with
> '.item3' : trimGroupPreviewText
>

> And inside *trimGroupPreviewText*  reference the parameter *this.previewText
> *
> *
> *
> *
> *