个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 02:54:14 26 4
gpt4 key购买 nike

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

最佳答案

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

示例:

 <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&lt;br /&gt;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 的 mixin或在您的类(class)中声明它，其中只有一个会起作用。

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

26 4 0
文章推荐： android - Flutter第一次构建错误:Could not open settings remapped class cache for 7yvt6la2007dno98lt3rzbguf
文章推荐： sql - 当列值更改时对 Sql Server 表行进行排名
文章推荐： sql-server - 连接名字和姓氏作为名称，然后在 SSIS 中省略名字和姓氏
文章推荐： dart - Dart 是否旨在在编译为非 Dart 目标方面取代 Haxe？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com