使用换行符绑定文本

本文介绍了使用换行符绑定文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

解决方案

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

示例：

 < nl2br-element text ={{}}>< / nl2br-element>

nl2br.dart

$ b b

  library nl2br; 
 
 importdart：html; 
 import'package：polymer / polymer.dart'; 
 importpackage：polymer_expressions / polymer_expressions.dart; 
 
 @CustomTag（'nl2br-element'）
类Nl2brElement使用ObservableMixin扩展PolymerElement {
 @observable String text; 
 
 DocumentFragment instanceTemplate（Element template）=> 
 template.createInstance（this，
 new PolymerExpressions（globals：{
'splitnewline'：（String input）=> input.split（\\\
）
} ））; 
}

nl2br.html
$ b

 < polymer-element name =nl2br-elementattributes =text> 
< template> 
< template repeat ={{line in text | splitnewline}}> 
 {{line}}< br /> 
< / template> 
< / template> 
< script type =application / dartsrc =nl2br.dart>< / script> 
< / polymer-element>

nl2br_test.html

 <！DOCTYPE html> 
 
< html> 
< head> 
< link rel =importhref =nl2br.html> 
< script src =packages / polymer / boot.js>< / script> 
< / head> 
< body> 
< template id =nl2brbind> 
< nl2br-element text ={{}}>< / nl2br-element> 
< / template> 
 
< script type =application / dartsrc =nl2br_test.dart>< / script> 
< / body> 
< / html>

nl2br_test.dart

$ b b

  library nl2br_test; 
 
 import'dart：html'; 
 
 main（）{
 query（＃nl2br）。model =foo\\\
bar; 
}

您可以创建一个聚合表达式来代替 \\ n 与< br /> 。
现在，聚合物消毒所有的html，你不能绕过它没有DOM操作。由于它会使< br /> html安全，foo\\\ bar将完全显示为 foo& lt; br /> bar ，而不显示换行符。 这意味着这不会完全符合您想要的，但如果polymer添加了在网页上显示安全html的方法，这将是一条路。

  library nl2br_mixin; 
 
 importdart：html; 
 importpackage：polymer_expressions / polymer_expressions.dart; 
 
 class Nl2brMixin {
 DocumentFragment instanceTemplate（Element template）=> 
 template.createInstance（this，
 new PolymerExpressions（globals：{
'nl2br'：（String input）=> input.replaceAll（\\\
，< br / >）
}））; 
}

您可以使用此Mixin与您的PolymerElement

 类CustomElement扩展PolymerElement与ObservableMixin，Nl2brMixin {
 @observable 
 String text =foo\\\
bar ; 
}

并在模板中使用nl2br表达式

  {{text |现在这可能不是最好的方法来获取  
 
 
  nl2br 在您的自定义元素中的表达式，而不明确地将它放在类中。如果你有多个mixins声明 instanceTemplate 或在你的类中声明它，只有其中一个将工作。
 
I have a binding to a string with a line break, like 'Hello\nWorld' in my model. Now I want to display the value in my template using {{x}}. But the line break is not correctly displayed. Does polymer provide any support for outputting <br> for line breaks?
 解决方案 
Right now your best option would be to create a Nl2br PolymerElement. The only place you can add mark up is inside of the template, so you'll need a template to split the string and add the <br />s

Example:
 <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";
}
You can create a polymer expression that will replace \n with <br />.Right now, polymer sanitizes all html and you can't get around it without DOM manipulation. Since it will make <br /> html safe, foo\nbar will display exactly as foo&lt;br /&gt;bar on the page without showing a line break. Which means this won't do exactly what you want, but if polymer adds a way to display safe html on the page, this would be the way to go.
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 />")
        }));
}
You can use this mixin with your PolymerElement
class CustomElement extends PolymerElement with ObservableMixin, Nl2brMixin {
  @observable
  String text = "foo\nbar";
}
And use the nl2br expression in your template
{{text | nl2br}}
Now this probably isn't the best way to get the nl2br expression in your custom element without explicitly putting it in your class. If you have multiple mixins that declare instanceTemplate or declare it in your class, only one of them will work.
                        这篇关于使用换行符绑定文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！