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

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

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

显示蔬菜种类。

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

potatos
carrots
pumpkins

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

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

potatos carrots pumpkins

我将不胜感激建议解决

编辑:01-02-2016

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

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

最佳答案

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>');
            }
        }
    ]);

关于javascript - 在 XTemplate 中显示值，如 textarea 格式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35119906/