部分 html 本地化

Question

问题

我需要本地化我的 Web 应用程序。我使用两种语言 - 英语和挪威语（这不重要）。

我使用资源文件来本地化标准视图。他们位于一个名为 Myproject.Localisation 的单独项目中：

• Lo​​calized.resx
• Lo​​calized.no.resx

在剃刀视图中看起来像这样：

<li>@Localised.WhatEverINeedToLocalise</li>

然后我有两个标准的部分 html 文件，其中包含一些 html 和一些 knockout.js，它们像这样作为 amd 依赖项加载并稍后在我的 typescript 类中使用：

///<amd-dependency path="text!./productTemplate.html" />
///<amd-dependency path="text!./anotherTemplate .html" />

var contentTemplate = require("text!./productTemplate.html");
var anotherTemplate = require("text!./anotherTemplate .html");

---

问题

显然，我也必须在其中进行翻译。有没有办法可以使用 razor 并使用我拥有的资源文件生成这些部分 html 文件？

如果没有，是否还有其他选择，可能比我的解决方案更简单（阅读下文）？

---

我的解决方案

我想出的唯一方法是安装 i18next 及其敲除绑定，编写一个 T4 模板，该模板将从 resx 文件生成翻译 json，然后使用敲除翻译部分 html。 但是，它似乎过于复杂。

Answer 1

我在我的项目中所做的是使用基本视图模型类来处理来自服务器的文本数据检索。 每个视图模型都有自己的 ID，与服务器上使用的资源 ID 匹配。 获取的文本以如下结构保存在基本视图模型类中：

public texts: KnockoutObservableArray<ITextItem> = ko.observableArray<ITextItem>();

.. ITextItem 是这样的结构：

interface ITextItem {
    id: string;
    value: KnockoutObservable<string>;
}

.. 使用如下函数获取：

public updateTexts(cultId: string): Q.Promise<any> {
    if (this.textsName === '')
        this.textsName = this.modelId;
    if (this.lastCultureIdFetched != cultId) {
        this.lastCultureIdFetched = cultId;
        return mm_cspData.cspCtx.getTexts(this.textsName, this.texts);
    }
    else
        return Q.resolve(true);
}

.. 从视图模型中获取的特定文本如下：

public tx(id: string): string {
    var match: ITextItem = ko.utils.arrayFirst(this.texts(), item=> item.id === id);
    if (!match)
        return ''; 
    else
        return match.value();
}

因此，每次激活视图模型或更改应用程序语言时，都会触发 updateText 方法。

为了在我的 html 视图中显示文本，我使用敲除绑定处理程序从视图模型中获取正确的文本。作为一项规则，每个视图模型都被导出到一个名为 vm 的变量中，所以我可以这样做：

ko.getVmTx = (label: any, bindingContext: any) : string => {
    if (label === null)
        return '';
    var vm: any;
    var labelId;
    if (typeof label === 'object' && typeof label.vm === 'object' && typeof label.vm.tx !== 'function') {
        vm = label.vm;
        labelId = label.tx;
    } else {
        vm = bindingContext.$root.vm;
        labelId = ko.unwrap(label);
    }
    if (vm === null || typeof vm === 'undefined' || typeof vm.tx !== 'function') {
        console.log('tx binding: unable to find vm for ' + label);
        return '';       
    }
    else
    return vm.tx(labelId);
}
ko.bindingHandlers.tx = {
    update: (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) => {
        $(element).text(ko.getVmTx(valueAccessor(),bindingContext));
    }
};
ko.bindingHandlers.txVal = {
    update: (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) => {
        $(element).val(ko.getVmTx(valueAccessor(), bindingContext));
    }
};

最后在我看来，我使用这样的绑定处理程序：

<span class="app-badge-label-bg" data-bind="tx: 'FinInvAmount'"></span>

这是一个庞大的设置，但一旦到位，文本处理由基础视图模型类负责，您需要为每个视图模型做的唯一事情就是在服务器端设置资源文件并使用简单的剔除绑定对您的标签和值进行数据绑定。