Связать текст с разрывами строк

У меня есть привязка к строке с разрывом строки, например 'Hello\nWorld' в моей модели. Теперь я хочу отобразить значение в своем шаблоне, используя {{x}}. Но разрыв строки отображается неправильно. Обеспечивает ли полимер какую-либо поддержку вывода <br> для разрывов строк?


dart dart-polymer
person Fox32    schedule 12.10.2013    source источник
comment
Кажется, это тот же вопрос, что и stackoverflow.com/questions /19316300/ на который уже есть ответы.   -  person Günter Zöchbauer    schedule 13.10.2013

Ответы (1)


arrow_upward
3
arrow_downward

Прямо сейчас лучшим вариантом будет создать файл Nl2br PolymerElement. Единственное место, где вы можете добавить разметку, находится внутри шаблона, поэтому вам понадобится шаблон, чтобы разделить строку и добавить <br />s

Пример:

 <nl2br-element text="{{}}"></nl2br-element>

nl2br.dart

library nl2br;

import "dart:html";
import 'package:polymer/polymer.dart';
import "package:polymer_expressions/polymer_expressions.dart";

@CustomTag('nl2br-element')
class Nl2brElement extends PolymerElement with ObservableMixin {
  @observable String text;

  DocumentFragment instanceTemplate(Element template) =>
      template.createInstance(this,
          new PolymerExpressions(globals: {
            'splitnewline': (String input) => input.split("\n")
          }));
}

nl2br.html

<polymer-element name="nl2br-element" attributes="text">
  <template>
    <template repeat="{{line in text | splitnewline}}">
      {{line}}<br />
    </template>
  </template>
  <script type="application/dart" src="nl2br.dart"></script>
</polymer-element>

nl2br_test.html

<!DOCTYPE html>

<html>
  <head>
    <link rel="import" href="nl2br.html">
    <script src="packages/polymer/boot.js"></script>
  </head>
  <body>
    <template id="nl2br" bind>
      <nl2br-element text="{{}}"></nl2br-element>
    </template>

    <script type="application/dart" src="nl2br_test.dart"></script>
  </body>
</html>

nl2br_test.dart

library nl2br_test;

import 'dart:html';

main() {
  query("#nl2br").model = "foo\nbar";
}

Вы можете создать полимерное выражение, которое заменит \n на <br />. Прямо сейчас полимер очищает весь html, и вы не можете обойти его без манипуляций с DOM. Так как это сделает <br /> html безопасным, foo\nbar будет отображаться точно так же, как foo&lt;br /&gt;bar на странице без разрыва строки. Это означает, что это не будет делать именно то, что вы хотите, но если полимер добавит способ отображения безопасного html на странице, это будет то, что вам нужно.

library nl2br_mixin;

import "dart:html";
import "package:polymer_expressions/polymer_expressions.dart";

class Nl2brMixin {
  DocumentFragment instanceTemplate(Element template) =>
    template.createInstance(this,
        new PolymerExpressions(globals: {
          'nl2br': (String input) => input.replaceAll("\n", "<br />")
        }));
}

Вы можете использовать этот миксин с вашим PolymerElement

class CustomElement extends PolymerElement with ObservableMixin, Nl2brMixin {
  @observable
  String text = "foo\nbar";
}

И используйте выражение nl2br в своем шаблоне

{{text | nl2br}}

Теперь это, вероятно, не лучший способ получить выражение nl2br в вашем пользовательском элементе, не помещая его явно в ваш класс. Если у вас есть несколько миксинов, которые объявляют instanceTemplate или объявляют его в вашем классе, только один из них будет работать.

person Nathanial    schedule 16.10.2013
comment
Хороший ответ, пока я использую решение из этого ответа: stackoverflow.com/a/19324203/218902 Позже, после того, как полимерная подложка будет доступна, я должен перейти к вашему ответу. - person Fox32; 16.10.2013
comment
Хорошо, решил использовать ваше первое решение, но без дополнительного пользовательского элемента, чтобы уменьшить зависимости от дополнительных элементов. Интеграция решений в мой существующий элемент отлично работает, спасибо! - person Fox32; 16.10.2013