首页 > 解决方案 > 带淘汰赛和数据绑定的异步 API 调用

问题描述

首先,我是淘汰赛的新手,我主要是一个有棱角的人。

我有一个应用程序将所有翻译存储在本地存储中,以便进行本地化。

我又创建了一个函数,该函数获取用户的语言(通过 API 调用)并将结果存储在代码中,然后对于您提供的参数,获得翻译。

//GET TRANSLATION VALUE FROM LOCAL STORAGE
    self.getTranslation = function (name) {
        if (self.darwinTranslations == null || self.userLanguage == null) {
            self.darwinTranslations = JSON.parse(localStorage.getItem('darwin-translations'));
            var userLanguageURL = '/api/Language/GetCurrentUserLanguage';
            $.getJSON(userLanguageURL, function (data) {
                self.userLanguage = data;
                self.getTranslationAfterInitialization(name);
            });

        } else {
            self.getTranslationAfterInitialization(name);
        }
    }
    self.getTranslationAfterInitialization = function (name) {
        if (self.translatedLanguage == null || self.englishLanguage == null) {
            for (var index in self.darwinTranslations) {
                if (self.darwinTranslations.hasOwnProperty(index)) {
                    if (self.darwinTranslations[index].language == self.userLanguage) {
                        self.translatedLanguage = self.darwinTranslations[index];
                    }
                    if (self.darwinTranslations[index].language == 'en') {
                        self.englishLanguage = self.darwinTranslations[index];
                    }
                }
            }
        }

        var translation = self.translatedLanguage.translations[name];
        if (translation == null) {
            translation = self.englishLanguage.translations[name];
        }
        return translation;
    }

此外,在我的淘汰赛中有用于设置标题表标题的代码:

self.headers = [
    { title: 'Client Group', sortPropertyName: 'clientGroupName', asc: true, sortable: true },
    { title: 'Ghosting Project Name', sortPropertyName: 'name', asc: true, sortable: true },
    { title: 'Savings', asc: true, sortable: false },
    { title: 'Entegra Contact', sortPropertyName: 'pslContact', asc: true, sortable: false },
    { title: 'Sales Status', sortPropertyName: 'salesStatus', asc: true, sortable: false },
    { title: 'Last Updated', sortPropertyName: 'lastModified', asc: true, sortable: true },
    { title: 'Remove', sortPropertyName: 'remove', asc: true, sortable: false }
];

当然,在我们正在做的 HTML 中:

<table class="cdb-table" id="GhostingHomeTable" data-bind="visible: ghostingExercises().length > 0">
    <thead>
        <tr data-bind="foreach: headers">
            <th class="sortableHeader" data-bind="click: $parent.sort">
                <span data-bind="text: title" style="text-align: center;"></span>
                <!-- ko if: sortable -->
                <i style="text-align: right;" class="fa fa-sort"></i>
                <!-- /ko -->
            </th>

        </tr>
    </thead>

我想要做的是将标题中的标题更改为翻译后的文本,但是任何时候我尝试使用我添加的方法,因为 $.getJSON 是异步的,所以列不能显示在 f/e 中。我假设是因为在异步方法返回时已经应用了绑定。

有人能帮我吗?

标签: knockout.js

解决方案


推荐阅读