Webix Jet有很多Plugins，其中Locale Plugin就可以實現多語言
在App尚未渲染畫面前，先載入Locale Plugin
// myapp.js
import {JetApp, plugins} from "webix-jet";
...
app.use(plugins.Locale);
app.render();
需新增一格Locale的資料夾，並且在裡面新增語言的JS檔(以下為中文語言的範例檔)
// locales/zh.js
export default {
"My Profile" : "我的個人資料",
"My Account" : "我的帳戶",
"My Calendar" : "我的日曆"
};
語言預設為英文，如果要換語言需啟用對應的語系檔
// app.js
app.use(plugins.Locale,{ lang:"zh" });
要翻譯所有文字，您需要將所有的_（）方法應用於每個標籤。 該方法採用一個參數對應一個文字。
_（）在語言環境文件中查找文字並返回翻譯。 例如。 如果選擇了中文，則this.app.getService \（“ locale” \）。\ _ \（“My Profile” \）將返回“我的個人資料”。
例如，讓我們將_（）方法應用於菜單：
// views/menu.js
import {JetView} from "webix-jet";
export default class MenuView extends JetView {
config(){
const _ = this.app.getService("locale")._;
return {
view:"menu", data:[
{ id:"profile", value:"My Profile" },
{ id:"account", value:"My Account" },
{ id:"calendar", value:"My Calendar" }
],
template:(obj)=>{
return _(obj.value)};
}
};
}
}
動態切換語言
想要讓使用者自由切換語言，可使用setLang()來切換目前的語言。
注意!
不要在JetView的生命週期處理程序中調用setLang（）！ 它使用app.refresh（）會重新整理所有視圖，這將會造成無限循環。
讓我們為應用程序設置創建一個簡單的頁面，該頁面帶有用於選擇語言的分段按鈕。 請注意，按鈕選項的ID應該與語言環境文件名相同（例如“ es”，“ zh”）。
// views/settings.js
import {JetView} from "webix-jet";
export default class SettingsView extends JetView {
config(){
return {
type:"space", rows:[
{ template:"Settings", type:"header" },
{ name:"lang", optionWidth: 120, view:"segmented", label:"Language", options:[
{ id:"en", value:"English" },
{ id:"zh", value:"中文" }
], click:() => this.toggleLanguage() }, //will be implemented as a method of this class
{}
]
};
}
}
View畫面
點選後中文後，網頁有使用翻譯功能就可以對應語言檔去顯示文字。
官網說明：
沒有留言:
張貼留言