Теги HTML в интернационализированных строках в 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>

... и иметь следующий код дротика:

@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 internationalization dart-html dart-polymer
person Peter    schedule 01.01.2014    source источник
comment
возможный дубликат привязать содержимое, содержащее теги html   -  person Günter Zöchbauer    schedule 01.01.2014
comment
Спасибо, Гюнтер. Вы знаете, как будет выглядеть полимерный элемент safe-html?   -  person Peter    schedule 01.01.2014

Ответы (1)


arrow_upward
6
arrow_downward

Обновить

Готовым к использованию элементом для 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>
person Günter Zöchbauer    schedule 01.01.2014
comment
Спасибо, Гюнтер. Когда я использую ваш элемент как <safe-html model="{{myContent}}"><safe-html>, я получаю следующие ошибки, и содержимое не соответствует стилю. Removing disallowed attribute <SPAN class="content"> Removing disallowed attribute <SPAN class="subtitle"> Removing disallowed attribute <SPAN class="content"> Removing disallowed attribute <SPAN class="subtitle"> Removing disallowed attribute <SPAN class="content"> - person Peter; 01.01.2014
comment
Вы можете настроить NodeValidator. Я добавил строку ` ..allowElement('SPAN', attribute: ['class']);` в качестве примера (на самом деле не пробовал - надеюсь, что все равно сработает) - person Günter Zöchbauer; 01.01.2014
comment
allowHtml5() явно исключает элементы сценария, атрибуты стиля и любые обработчики сценариев ( из API dartdoc ). - person Peter; 01.01.2014
comment
Кредит для этого элемента идет на stackoverflow.com/questions/19316300 (только что снова наткнулся) - person Günter Zöchbauer; 15.01.2014