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

问题描述

我在 Polymer 元素中显示国际化字符串，如下所示:

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

...并具有以下飞镖代码:

@observable String title;@observable 字符串子标题1；@observable 字符串第 1 段；@observable 字符串子标题2；@observable 字符串第 2 段；//...void onUpdateLocale(_locale) {标题 = getTitle();副标题1 = getSubtitle1();段落1 = getParagraph1();字幕 2 = getSubtitle2();段落2 = getParagraph2();}//...getTitle() =>Intl.message('我的标题', name:'title',desc: '这是我的头衔',参数:[]，示例:{'无':0});getSubtitle1() =>Intl.message('Subtitle1', name:'subtitle1',desc: '这是我的第一个字幕',参数:[]，示例:{'无':0});getParagraph1() =>Intl.message('这是我的第一段',名称:'第1段'，desc: '这是我的第一段',参数:[]，示例:{'无':0});getSubtitle2() =>Intl.message('Subtitle 2', name:'subtitle1',desc: '这是我的第二个副标题',参数:[]，示例:{'无':0});getParagraph2() =>Intl.message('这是我的第二段',名称:'第2段'，desc: '这是我的第二段',参数:[]，示例:{'无':0});

有没有办法组合title、subtitle1、paragraph1、subtitle2和paragraph2 到一个可观察变量中，在其值中包含
和 标签?

解决方案

更新

Dart Polymer 1.0 的现成元素是 bwu-bind-html

更新

Polymer 现在为此提供了开箱即用的支持

 this.injectBoundHTML('<div>你的 HTML 在这里 ${someBoundFieldValue}</div>);

旧

这是我使用的 标签的代码.

library safe_html;导入飞镖:异步"；导入飞镖:html"；导入包:聚合物/聚合物.dart"；@CustomTag("safe-html")class SafeHtml 扩展 PolymerElement {@published 字符串模型；NodeValidator nodeValidator;bool get applyAuthorStyles =>真的;bool isInitialized = false;SafeHtml.created() : super.created() {nodeValidator = new NodeValidatorBuilder()..allowTextElements();}无效模型Chanded(旧){如果(isInitialized){_addFragment();}}无效_addFragment(){var fragment = new DocumentFragment.html(model, validator: nodeValidator);$["容器"].nodes..清除()..添加(片段)；}@覆盖无效附加(){超级附加()；定时器运行((){_addFragment();isInitialized = true;});}}

<聚合物元素名称="safe-html"><模板><div id="容器"></div><script type="application/dart" src='safe_html.dart'></script></聚合物元素>

用法:

<safe-html model="{{someField}}></safe-html>

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?

解决方案

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>

这篇关于Polymer.dart 中国际化字符串中的 HTML 标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！