如何在运行时在表单生成器中使用 I18n 和 Json Schema？

Posted 2023-02-16

【中文标题】如何在运行时在表单生成器中使用 I18n 和 Json Schema？

【英文标题】：How to use I18n and Json Schema in Form-generator at run-time?

【发布时间】：2020-08-13 10:54:46

【问题描述】：

我有一个表单，它将由基于从服务器获取的 json 模式的 formGenerator 创建。我想根据语言翻译价值观。我不知道我应该如何在运行时使用 i18n 来处理它。

例如，服务器发送一个如下所示的 Json-schema，我们应该从中创建一个表单，例如：

  "instance": 
    "specification": 
      "label": "",
      "title": ""
    

如果我们将它传递给我们的简单表单生成器，它只会生成两个空标签，如下所示：

我必须使用翻译文件（如下面的 en.json）来填充获取的 json-schema，然后将其传递给表单生成器。

  
    "instance":
        "specification":
            "label":"this is label",
            "title":"this is title"
        
    

我知道这两个跨度是否可以在模板中使用 $t("instance.specification.label") 和 $t("instance.specification.label") 如下所示，在 i18n 中使用翻译文件来制作它工作：

<span>$t(instance.specification.label)</span>

<span>$t(instance.specification.title)</span>

但我想知道在这种情况下我应该如何做到这一点，这是一个动态 json 模式？

【问题讨论】：

在你的 JSON 模式中包含神秘的密钥使得它本身几乎不可用。期望将目标语言提供给服务器，然后服务器返回带有正确翻译的标签和描述的模式？

这是项目预期。

【参考方案1】：

似乎没有办法为此目的使用 i18n，所以我为这个用例制作了一个库，供任何和我有同样问题的人使用。这是图书馆：

https://www.npmjs.com/package/i18n-translator-for-json-templates

更新

要使用这个包，你可以在你的模板文件中使用 mustache 模板（更多信息，请参见链接），如下所示：

//template.json

      "platformType": "specification.platformType",
      "ownershipMode": "COBO",
      "version": 1,
      "description": "specification.description",
      "label": "specification.label"

而且你还得为其准备语言文件，例如：

//en_lang.json
 "specification": 
        "platformType": "android",
        "description": "Command Schema For 'Company Owned/Business Only'",
        "label": "COBO3"
      
 

最后你可以像下面的例子一样使用库：

import i18nTranslatorForJsonTemplates from "i18n-translator-for-json-templates";
const result = i18nTranslatorForJsonTemplates(en_lang, template);
console.log(JSON.stringify(result));
/*output
                                                                        
   "platformType": "Android",                                            
   "ownershipMode": "COBO",                                              
   "version": 1,                                                         
   "description": "Command Schema For 'Company Owned/Business Only'",    
   "label": "COBO3"                                                      
                                                                        
*/