HTML Tags Within Internationalized Strings In Polymer.dart HTML Tags Within Internationalized Strings In Polymer.dart dart dart

HTML Tags Within Internationalized Strings In Polymer.dart


Update

A ready-to-use element for Dart Polymer 1.0 is bwu-bind-html


Update

Polymer now provides support for this out of the box

 this.injectBoundHTML('<div>your HTML goes here ${someBoundFieldValue}</div>);

Old

This is the code of the <safe-html> tag I'm using.

library safe_html;import 'dart:async';import "dart:html";import "package:polymer/polymer.dart";@CustomTag("safe-html")class SafeHtml extends PolymerElement  {  @published String model;  NodeValidator nodeValidator;  bool get applyAuthorStyles => true;  bool isInitialized = false;  SafeHtml.created() : super.created() {    nodeValidator = new NodeValidatorBuilder()    ..allowTextElements();  }  void modelChanded(old) {    if(isInitialized) {      _addFragment();    }  }  void _addFragment() {    var fragment = new DocumentFragment.html(model, validator: nodeValidator);    $["container"].nodes    ..clear()    ..add(fragment);  }  @override  void attached() {    super.attached();    Timer.run(() {      _addFragment();      isInitialized = true;    });  }}
<!DOCTYPE html><polymer-element name="safe-html">   <template>    <div id="container"></div>  </template>  <script type="application/dart" src='safe_html.dart'></script></polymer-element>

usage:

<safe-html model="{{someField}}></safe-html>