国际化 – Polymer.dart中国际化字符串中的HTML标签

发布时间：2021-04-01 01:16 所属栏目：12 来源：网络整理

导读：我在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="con

我在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>);

旧

这是< 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>

（编辑：ASP站长网）