javascript - 在 XTemplate 中显示值，如 textarea 格式

Question

我正在使用带有以下模板的插件 rowexpander(网格)。

rowBodyTpl: new Ext.XTemplate('<div>'+
    '<div>'+
        '<b>Vegetables:</b>'+
        '<ul><li>{vegetables_types}</li></ul>'+
    '</div>'+
'</div>')

显示蔬菜类型。

项目通过文本区域字段发送到服务器，每个值由段落分隔，创建一种列表。

potatos
carrots
pumpkins

如果我使用文本区域编辑这些值，它们将以与发送到服务器的相同格式(如列表)显示在文本区域中。

但是，使用 XTemplate 我只能在一行中显示它们。

potatos carrots pumpkins

我很感激解决问题的建议

编辑:01-02-2016

fiddle :https://fiddle.sencha.com/#fiddle/14se

FIDDLE(已解决):https://fiddle.sencha.com/#fiddle/14sf

Answer 1

XTemplate 创建 HTML，而文本区域使用格式化的纯文本。

HTML 确实将代码中的换行符仅显示为单个空格。 HTML 换行符使用 <br> 制作标签。

所以你必须替换\n与 <br>在您的模板中显示换行符:

    var rowBodyTpl = new Ext.XTemplate([
      '<div>',
      '<div style = "white-space: pre-wrap;">',
      '<b>Vegetables:{[this.replaceBR(values.vegetables_types)]}</b>',
      '</div>',
      '</div>',
        {
            replaceBR:function(text) {
                return text.replace(/\n/g,'<br>');
            } 
        }
    ]);