同事们,
我正在尝试使用Material Design Lite创建一个多语言网站,过去我使用过这个库:
How to Create a Multilingual Application using JavaScript
并且工作得很好,它期望像这样的JSON(en.json):
{
"chooseTime": "Speech type"
}
它添加了所有翻译,但如果您尝试在MDL中执行相同操作,则不会发生任何变化。
基本的html是这样的:
<body load="load()"><!--content--></body>
如果我对数据进行硬编码,它看起来像这样:
但是,如果我加载翻译,它会保持空白。
这是完整的例子:
var langs = ["en", "es"];
function load(){
let translate = new Translate();
let lang = navigator.language || navigator.userLanguage;
if (!langs.includes(lang))
lang = "en";
translate.init(lang);
translate.process();
}
function Translate() {
//initialization
this.init = function(lng){
this.attribute = "data-tag";
this.lng = lng;
}
//translate
this.process = function(){
_self = this;
let xrhFile = new XMLHttpRequest();
//load content data
xrhFile.open("GET", "https://fanmixco.github.io/toastmasters-timer-material-design/js/lang/en.json", false);
xrhFile.onreadystatechange = function ()
{
if(xrhFile.readyState === 4)
{
if(xrhFile.status === 200 || xrhFile.status == 0)
{
let LngObject = JSON.parse(xrhFile.responseText);
//console.log(LngObject["name1"]);
let allDom = document.getElementsByTagName("*");
for(let i =0; i < allDom.length; i++){
let elem = allDom[i];
let key = elem.getAttribute(_self.attribute);
if(key != null) {
//console.log(key);
elem.innerHTML = LngObject[key];
}
}
}
}
}
xrhFile.send();
}
}
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/getmdl-select.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/getmdl-select.min.js"></script>
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet"/>
<div class="mdl-textfield mdl-js-textfield getmdl-select">
<input type="text" value="" class="mdl-textfield__input" id="cmbSpeechType" readonly>
<input type="hidden" value="" name="hiddenSpeechType" id="hiddenSpeechType">
<label for="cmbSpeechType" class="mdl-textfield__label">Speech type</label>
<ul for="cmbSpeechType" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
<li class="mdl-menu__item" data-val="0">Question of the Day (30s)</li>
</ul>
</div>
<div class="mdl-textfield mdl-js-textfield getmdl-select">
<input type="text" value="" class="mdl-textfield__input" id="cmbSpeechTypeTrans" readonly>
<input type="hidden" value="" name="hiddenSpeechType" id="hiddenSpeechType">
<label for="cmbSpeechTypeTrans" class="mdl-textfield__label" data-tag="chooseTime"></label>
<ul for="cmbSpeechTypeTrans" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
<li class="mdl-menu__item" data-val="0" data-tag="opt1"></li>
</ul>
</div>
在我添加之后第二个选择中出现问题:data-tag =“chooseTime”并且没有加载任何内容。
说实话,我不知道为什么,因为我有其他网站使用插件,他们按预期工作,而在这种情况下没有任何事情发生。此外,我尝试在加载所有翻译后添加此代码:
componentHandler.upgradeAllRegistered();
任何想法或建议为什么不起作用?或者任何与MDL一起使用的翻译插件?因为我找不到一个,我发现它的唯一部分示例是用Spring (Java)构建的,我没有使用任何服务器端编程语言。谢谢你的想法。
我找到了如何解决它,最初,插件以这种方式工作:
<body load="load();">
</body>
我只是将负载移到了页面的末尾,现在它正在工作:
<body>
<script>load();</script>
</body>