Menu
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?
702
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
