我绑定(bind)到一个带有换行符的字符串，例如 'Hello\nWorld'在我的模型中。现在我想使用 {{x}} 显示模板中的值。但换行符未正确显示。聚合物是否提供输出支持<br>用于换行符？
最佳答案
现在您最好的选择是创建 Nl2br PolymerElement 。您可以添加标记的唯一位置是模板内部，因此您需要一个模板来拆分字符串并添加 <br />
示例:
<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<br />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 的 mixins或者在你的类中声明它，只有其中一个可以工作。
关于dart - 用换行符绑定(bind)文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19338220/