dart - 用换行符绑定(bind)文本

我有一个带有换行符的字符串绑定(bind)，例如模型中的'Hello\nWorld'。现在，我想使用{{x}}在我的模板中显示值。但是换行符未正确显示。聚合物是否提供支持为换行符输出 ？

最佳答案

现在，最好的选择是创建一个Nl2br PolymerElement。您可以添加标记的唯一位置是模板的内部，因此您需要一个模板来拆分字符串并添加 。

示例:

 <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替换为 。
现在，Polymer会清除所有html，如果没有DOM操作，您将无法解决它。由于它将使  html安全，因此foo\nbar将在页面上与foo bar完全一样显示，而不会出现换行符。 ，这将不会完全满足您的需求，但是如果Polymer添加了一种在页面上显示安全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，则只能使用其中之一。

关于dart - 用换行符绑定(bind)文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19338220/

NL2BR

dart - 用换行符绑定(bind)文本