我在Polymer元素中显示国际化字符串,如下所示：
<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>
…并有以下飞镖码：
@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',examples: {'None' : 0});
getParagraph1() => Intl.message('This is my first paragraph',name:'paragraph1',desc: 'This is the my first paragraph',examples: {'None' : 0});
getSubtitle2() => Intl.message('Subtitle 2',desc: 'This is my second subtitle',examples: {'None' : 0});
getParagraph2() => Intl.message('This is my second paragraph',name:'paragraph2',desc: 'This is the my second paragraph',examples: {'None' : 0});
有没有办法将title,subtitle1,paragraph1,subtitle2和paragraph2合并到一个包含< br>的可观察变量中.和< span>标签的价值？
解决方法
更新
Dart Polymer 1.0的即用元素是bwu-bind-html
更新
Polymer现在提供开箱即用的支持
this.injectBoundHTML('<div>your HTML goes here ${someBoundFieldValue}</div>);
旧
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>
用法：
<safe-html model="{{someField}}></safe-html>
