ExtJS：Xtemplate 无法识别 /n /r 等特殊字符

Question

我的店铺记录有一些特殊字符如下

name: "Hi \r\n\r\n Location Name: Hello\r\n\r\n"

但是当它显示在 UI 上时（使用 XTemplate），特殊字符不显示，甚至不应用。它们只是被丢弃了。

//X模板

    var cars_template = new Ext.XTemplate(
'<tpl =".">',
'<div class="cars-item">',                 
'<li>',
'<span>Name: </span><span>{[this.updateHtml(values.name)]}</span>',
'</li>',
'</div></tpl>',
{
  updateHtml: function(value){
    if(value){
      value = value.replace(/(?:\r\n|\r|\n)/g, '<br/>');            
    }
    return value;
  }
}

); 

Answer 1

这是因为换行符不是 html，它们需要以一种或另一种方式转换为它们的 html 等效项<br/>。

所以对于一个字符串，你可以像这样转换新行：

var myString = 'Hi \r\n\r\n Location Name: Hello\r\n\r\n';
myString = myString.replace(/(?:\r\n|\r|\n)/g, '<br/>');

感谢 Emissary，ExtJS 中有一个 built in 函数可以转换为 <br />：

Ext.util.Format.nl2br(value)

Here 是一个 sencha fiddle，其中包含 dataview 的工作示例，下面是相应的代码：

var s = Ext.create('Ext.data.Store', {
            fields: ['name'],
            data: [{
                name: "Hi \r\n\r\n Location Name: Hello\r\n\r\n"
            }, {
                name: "Hi \r\n\r\n A Test Here: Another Test\r\n\r\n"
            }]
        });
        Ext.create('Ext.panel.Panel', {
            renderTo: Ext.getBody(),
            title: 'Example Replacement',
            layout: 'fit',
            items: [{
                xtype:'dataview',
                store: s,
                tpl: [
                '<tpl for=".">', 
                '<div class="cars-item">', 
                '<li>', 
                '<span>Name: </span><span>{[this.updateHtml(values.name)]}</span>', 
                '</li>', 
                '</div>',
                '</tpl>', 
                {
                    updateHtml: function(value) {
                        console.log(value);
                        if (value) {
                            value = value.replace(/(?:\r\n|\r|\n)/g, '<br/>');
                        }
                        console.log(value);
                        return value;
                    }
                }
                ],
                multiSelect: true,
                height: 310,
                trackOver: true,
                itemSelector: '.cars-item',
                emptyText: 'Nothing to display'
            }]
        });

我 console.log 更改，这是用 <br /> 替换新行。