以简单的方式显示ractive中与filetype对应的图标

Question

对于节点应用程序，我有一个显示Ractive的上传文件列表，到目前为止效果很好。我使用的一个字段是Filetype（在我的数据中存储为扩展名，例如FileType: pptx）。

在我的ractive模板中，我想向上传的视觉辅助文件类型显示相应的图像，但这往往以无尽的if语句结束。

所以现在模板看起来（简化）就像

'<span class="fa 
{{#if FileType == "pptx" || FileType == "ppt" || FileType == "ppts" || //going on here forever}}
    fa-file-powerpoint-o
{{elseif FileType == "xls" || FileType == "xlsx" || ...}}
    fa-file-excel-o
//then the same follows for Videos, Word, pdf, ...
{{else}}
    fa fa-file-o
{{/if}} 
"></span>'

有没有人知道缩短那段可怕代码的好方法？

Answer 1

我认为最简单的方法是在您的数据中存储扩展名 - >类的映射。 ~/fileType。因此，{ ppt: 'fa-file-powerpoint-o', pptx: 'etc' }可以在模板中用作class="fa {{~/fileType[FileType] || 'fa-file-o'}}"。

您可以通过发送名称列表 - >类型来缩小数据。

const types = [[['ppt', 'pptx', 'ppty', 'pptz'],'fa-file-powerpoint-o'], [['exe'], 'fa-file-boom']]
const map = {};
types.forEach(entry => entry[0].forEach(extension => map[extension] = entry[1]));
this.set('fileType', map);

Answer 2

我认为解决该特定问题的最佳方法是使用数据库。

因此，您可以为指定的图标添加记录并为其分配多个扩展名。然后检索包含所有记录的数据集，然后循环遍历它并检查包含该扩展名的字段。

当然，您可以设置一个显示默认图标的“默认”记录。

而且，如果您只需要进行一次比较，那么逻辑执行可以在SELECT查询中传递给DBMS服务器。

编辑：

我意识到现在'数据库'必须是客户端。

所以只需使用xml文件。