Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Polymer 1.0 - How to bind html value

Tags:

polymer

I have a list of items in which each item has a .content html value as following.

  <template is="dom-repeat" items="{{entries}}">
    <li><p class="paper-font-body2">{{item.title}}</p>
      <div>{{item.content}}</div></li>
  </template>

content field is somewhat like this

  Hello <strong>Polymer</strong>

It shows in browser as plain text. How do I show it as safe html?

EDIT: this issue is raised, but it doesn't help me.

like image 542
Bao Le Avatar asked Jun 06 '15 02:06

Bao Le


People also ask

Which bracket is responsible for data binding?

Binding annotation. Text surrounded by double curly bracket ( {{ }} ) or double square bracket ( [[ ]] ) delimiters. Identifies the host data being bound.

Which form of data binding allows upward and downward data flow?

Automatic bindings allow upward and downward data flow.


2 Answers

You could easily do:

<template is="dom-repeat" items="{{entries}}">
    <li><p class="paper-font-body2">{{item.title}}</p>
      <div inner-h-t-m-l="{{item.content}}"></div></li>
  </template>

That's what I'm using, bearing in mind that XSS vulnerability is open.

like image 145
Peter Avatar answered Oct 18 '22 23:10

Peter


You could try something like this:

<dom-module id="echo-html">

  <template>
    <span>{{html}}</span>
  </template>

  <script>
    Polymer({
      is: 'echo-html',
      properties: {
          html: {
              type: String,
              value: 'html'
          }
      },
      ready: function() {
          this.innerHTML = this.html;
      }
    });
  </script>

</dom-module>

and call it like that I guess:

<div><echo-html html="{{item.content}}"></echo-html></div>
like image 45
evandor Avatar answered Oct 18 '22 23:10

evandor