Rendering Html

[Xavier Cochard]

I am still struggling to find a simple solution to render dynamic html.

This question has probably been asked million times but I can't find a simple answer so far. 

My current solution implies using querySelector and innerHtml but I can't call it "simple".

So considering a template such as:

    <template>

        <template bind repeat="{{item in itemList}}">

            {{item}}

        </template>

    </template>

And considering itemList as ["<div>A</div>", "<div>B</div>"]     (value initialized once ready)

What would be the best way to render the items?

I really wish Polymer would provide a triple brackets "{{{item}}}" to avoid encoding the html.

Thanks,

Xavier

[Eric Bidelman]

Hey Xavier,

Indeed, this has come up so many times that we have a FAQ entry for it!

http://www.polymer-project.org/resources/faq.html#setinnerHTML

Hope that helps,

Eric

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/1d2301f3-46ce-4f01-a78b-3f6c314f5c75%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Xavier]

Thank you.

I built a similar solution. I hoped to be wrong about it as it feels a bit awkward. 

Xavier

PS:

For however needs it, here is a sample solution based on stack-overflow.

<polymer-element name="p-html" attributes="html">

    <script>

        Polymer('p-html', {

            htmlChanged: function() {

                this.innerHTML = this.html;

            }

        });

    </script>

</polymer-element>

    <template>

        <template bind repeat="{{item in itemList}}">

            <p-html html="{{item}}"></p-html>

        </template>

    </template>

[Elliott Sprehn]

On Mon, Jul 21, 2014 at 6:32 PM, Xavier <xavier....@gmail.com> wrote:

Thank you.

I built a similar solution. I hoped to be wrong about it as it feels a bit awkward. 

This probably should be awkward, using innerHTML with the data binding is just asking for XSS. I don't even think Angular will let you bind directly to innerHTML anymore.

 

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAEOXzOTufT7ZitAAJbqW1fmh7Cq5oGTywRzVu5c7WGecCBBsCQ%40mail.gmail.com.