时间戳

首页 > 解决方案 > Framework7 更改对话框按钮文本（例如用于翻译）

javascript - Framework7 更改对话框按钮文本（例如用于翻译）

问题描述

我正在使用 Framework7 构建移动应用程序。这个应用程序应该可以选择更改语言。为此，我使用了一个带有键的语言对象，该对象包含一个带有键的对象来识别文本和要插入的文本。它看起来像这样：

var translations = {
  "en": {
    "btn-confirm": "Confirm",
    "btn-decline": "Decline"
  },
  "de": {
    "btn-confirm": "Bestätigen",
    "btn-decline": "Abbrechen"
  }
};

我创建了一个这样的对话框：

var dialog_appReset = app.dialog.create({
  title: 'Warning!',
  text: 'You are resetting the app. Are you sure?',
  buttons: [
    {
      text: 'Confirm',
      onClick: function() {
        console.log('confirmed');
      }
    },
    {
      text: 'Decline',
      onClick: function() {
        console.log('declined');
      }
    }
  ]
});

现在我想在语言更改时更改对话框的内容。为此，我正在获取所选语言的项目的翻译，并希望替换文本。

有一些方法可以更改对话框的标题和文本，但不能更改按钮文本。

所以我尝试像这样更改按钮文本：dialog_appReset.buttons[0].text = 'Bestätigen'，更改内容的内容，但不更新对话框。

经过一番尝试，我得到了更新按钮文本的解决方案，但这不是很漂亮：

  1. 获取实际的对话框参数
    var tempDialogParams = dialog_appReset.params;
  2. 更新这些参数
    tempDialogParams.buttons[0].text = translations['de'].btn-confirm;
    tempDialogParams.buttons[1].text = translations['de'].btn-decline;
  3. 销毁实际对话框
    dialog_appReset.destroy();
  4. 创建新对话框
    dialog_appReset = app.dialog.create(tempDialogParams);

这是为初始化对话框更新按钮文本的唯一方法吗？或者有更漂亮的方法吗？

注意：我目前正在使用Framework7 v3，但我在 v4 中也找不到方法。

标签： javascripthtml-framework-7

解决方案

更改已打开对话框上的文本是反模式恕我直言。对话框是用户唯一可以与之交互的东西，因此用户在打开对话框时不能更改语言，因此您不需要即时更新按钮文本。

如果这是一个有许多客户端同步的分布式系统，并且您需要反映远程用户对语言设置的更改，那么让客户端在最方便的时候选择新的语言设置（例如，当没有对话框时）显示在屏幕上），无论如何您都不需要立即更改它。

推荐阅读