[英]Bind text with line breaks
我綁定到帶換行符的字符串,例如模型中的'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 />
。 現在,Polymer會清除所有html,沒有DOM操作就無法解決。 由於它將使<br />
html安全,因此foo\\nbar
將與foo<br />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,則只有其中一個可以使用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.