簡體   English   中英

用換行符綁定文本

[英]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&lt;br /&gt;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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM