Связать текст с разрывами строк

У меня есть привязка к строке с разрывом строки, например 'Hello\nWorld' в моей модели. Теперь я хочу показать значение в моем шаблоне, используя {{x}}. Но разрыв строки отображается неправильно. Поддерживает ли полимер любую поддержку для вывода   для разрывов строк?Связать текст с разрывами строк

источник

2013-10-12 Fox32

Это похоже на тот же вопрос, что и http://stackoverflow.com/questions/19316300/bind-content-containing-html-tags, на котором alredy получил некоторые ответы. –

Прямо сейчас вашим лучшим вариантом было бы создать Nl2brPolymerElement. Единственное место, где вы можете добавить наценки внутри шаблона, так что вам нужен шаблон, чтобы разбить строку и добавить в   сек

Пример:

<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 с  . Прямо сейчас, полимер дезинфицирует весь html, и вы не можете обойти его без манипуляций с DOM. Так как он сделает   html safe, foo\nbar будет отображаться точно так же, как foo 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 />") 
     })); 
}

Вы можете использовать этот подмешать с PolymerElement

class CustomElement extends PolymerElement with ObservableMixin, Nl2brMixin { 
    @observable 
    String text = "foo\nbar"; 
}

И использовать nl2br выражение в шаблоне

{{text | nl2br}}

Теперь это, вероятно, не лучший способ, чтобы получить nl2br выражение в вашем пользовательском элементе без явного размещения его в вашем классе. Если у вас несколько микшинов, объявляющих instanceTemplate, или объявите их в своем классе, только один из них будет работать.

источник

2013-10-16 15:17:44 Nathanial

Хороший ответ, на данный момент я использую решение от этого anwser: http://stackoverflow.com/a/19324203/218902 Позже, после поддержки полимера, я должен переключиться на ваш ответ. – Fox32

ОК, решил использовать ваше первое решение, но без дополнительного пользовательского элемента, чтобы уменьшить зависимости от дополнительных элементов. Интеграция решений в мой существующий элемент отлично работает, спасибо! – Fox32

Связать текст с разрывами строк

ответ

Смежные вопросы