2

我有一个带有换行符的字符串绑定，就像'Hello\nWorld'在我的模型中一样。现在我想在我的模板中使用{{x}}. 但是换行符没有正确显示。<br>聚合物是否为换行符的输出提供任何支持？

4

1 回答 1

3

现在你最好的选择是创建一个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 />")
        }));
}

您可以将此 mixin 与 PolymerElement 一起使用

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

并在模板中使用 nl2br 表达式

{{text | nl2br}}

现在这可能不是nl2br在自定义元素中获取表达式而不明确将其放入类中的最佳方法。如果您有多个在您的类中声明instanceTemplate或声明它的 mixin，则只有其中一个可以工作。

于 2013-10-16T15:17:44.697 回答