Pet*_*ter 7 internationalization dart dart-html dart-polymer
我在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',
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});
有没有一种方法结合起来title,subtitle1,paragraph1,subtitle2,和paragraph2成,其中包括一个可观察的变量<br>,并<span>在它的价值标签？
更新
Dart Polymer 1.0的现成元素是bwu-bind-html
更新
Polymer现在提供开箱即用的支持
this.injectBoundHTML('<div>your HTML goes here ${someBoundFieldValue}</div>);
旧
这是<safe-html>我正在使用的标签的代码.
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>