HTML Tags Within Internationalized Strings In Polymer.dart

by

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="https://stackoverflow.com/questions/20868296/safe_html.dart"></script>

</polymer-element>

usage:

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

More Related Contents:

  1. how to implement a main function in polymer apps
  2. JavaFX 2 and Internationalization
  3. Polymer querySelector working on DartVM but not in Chrome after compile
  4. How do I fire a custom event from Polymer Dart?
  5. CORS with Dart, how do I get it to work?
  6. Flutter: Run method on Widget build complete
  7. How to import platform specific dependency in Flutter/Dart? (Combine Web with Android/iOS)
  8. Flutter – Collapsing ExpansionTile after choosing an item
  9. Flutter: Detect keyboard open and close [duplicate]
  10. The method ‘[]’ can’t be unconditionally invoked because the receiver can be ‘null’
  11. String concatenation containing Arabic and Western characters
  12. Textfield validation in Flutter
  13. When to use part/part of versus import/export in Dart?
  14. Should I use accented characters in URLs?
  15. How can I build an enum with Dart? [duplicate]
  16. Sizing elements to percentage of screen width/height
  17. how to place a listview inside a SingleChildScrollView but prevent them from scrolling separately?
  18. Clone a List, Map or Set in Dart
  19. Async/Await/then in Dart/Flutter
  20. How to Move bottomsheet along with keyboard which has textfield(autofocused is true)?
  21. How to change the icon size of Google Maps marker in Flutter?
  22. Flutter: Ignore touch events on a Widget
  23. Angular2 dynamic change CSS property
  24. Use ‘ui.decodeImageFromList’ to display an image created from a list of bytes
  25. InheritedWidget with Scaffold as child doesn’t seem to be working
  26. Flutter – How to make a custom TabBar
  27. In what JS engines, specifically, are toLowerCase & toUpperCase locale-sensitive?
  28. Null check doesn’t cause type promotion in Dart
  29. Flutter Gradle task assembleDebug failed with exit code 1 zip END header not found
  30. How does a set determine that two objects are equal in dart?

Leave a Comment