HTML Tags Within Internationalized Strings In Polymer.dart

问题

I am displaying internationalized strings within a Polymer element as follows:

<div>
  <span class=\"title\">{{title}}</span>
  <br/><br/>
  <span class=\"subtitle\">{{subtitle1}}</span>
  <br/>
  <span class=\"content\">{{paragraph1}}</span>
  <br/><br/>
  <span class=\"subtitle\">{{subtitle2}}</span>
  <br/>
  <span class=\"content\">{{paragraph2}}</span>
</div>

... and have the following dart code:

@observable String title;
@observable String subtitle1;
@observable String paragraph1;
@observable String subtitle2;
@observable String paragraph2;

//...

void onUpdateLocale(_locale) {
  title = getTitle();
  subtitle1 = getSubtitle1();
  paragraph1 = getParagraph1();
  subtitle2 = getSubtitle2();
  paragraph2 = getParagraph2();
}

//...

getTitle() => Intl.message(\'MY TITLE\', name:\'title\',
    desc: \'This is my title\',
    args: [],
    examples: {\'None\' : 0});
getSubtitle1() => Intl.message(\'Subtitle 1\', name:\'subtitle1\',
    desc: \'This is my first subtitle\',
    args: [],
    examples: {\'None\' : 0});
getParagraph1() => Intl.message(\'This is my first paragraph\',
    name:\'paragraph1\',
    desc: \'This is the my first paragraph\',
    args: [],
    examples: {\'None\' : 0});
getSubtitle2() => Intl.message(\'Subtitle 2\', name:\'subtitle1\',
    desc: \'This is my second subtitle\',
    args: [],
    examples: {\'None\' : 0});
getParagraph2() => Intl.message(\'This is my second paragraph\',
    name:\'paragraph2\',
    desc: \'This is the my second paragraph\',
    args: [],
    examples: {\'None\' : 0});

Is there a way to combine title, subtitle1, paragraph1, subtitle2, and paragraph2 into one observable variable that includes the <br> and <span> tags in its value?

回答1:

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>

来源：https://stackoverflow.com/questions/20868296/html-tags-within-internationalized-strings-in-polymer-dart

标签

internationalization

dart

dart-polymer

dart-html