国际化字符串中的HTML标签在Polymer.dart [英] HTML Tags Within Internationalized Strings In Polymer.dart

问题描述

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

...并具有以下dart代码：

  @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（'这是我的第一段'，
名称：'paragraph1'，
 desc：'这是我的第一段'，
 args：[]，
示例：{'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：'这是我的第二段'，
 args：[]，
示例：{'None'：0}）; 
  

有没有办法结合 title subtitle1 ， paragraph1 ， subtitle2 和 c2> 和< span> 的一个可观察变量

$ b

$ b

Dart Polymer 1.0的即用型元素是 bwu-bind-html

---

更新

Polymer现在支持这种开箱即用的功能。

  this.injectBoundHTML（'< div&您的HTML在这里$ {someBoundFieldValue}< / div>）; 
   

旧

这是我使用的< safe-html> 标记的代码。

  library safe_html; 
 
 import'dart：async'; 
 importdart：html; 
 
 importpackage：polymer / polymer.dart; 
 
 
 @CustomTag（safe-html）
 class SafeHtml extends PolymerElement {
 
 @published String model; 
 
 NodeValidator nodeValidator; 
 bool get applyAuthorStyles =>真正; 
 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 / dartsrc ='safe_html.dart'>< / script> 
 
< / polymer-element> 
  

用法：

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

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