Knockoutjs templatefiles and localized resx files

Question

Experimenting with building a SPA app on top of Web API I have come across a problem. In my project i use Resource.resx files to localize the information displayed. This is not problem when I create views in .cshtml format, but when I use Knockout templates i get a problem since they are .html and I can no longer access the Resource.resx directly.

I'v considered a few options, including, sending the localized strings together with the model from Web API, creating javascript variables in the .cshtml file and accessing them in the .html and creating a javascript localization file(that either contain constants, or get the values from the .resx ).

Anyone got any good ideas on how to work around this?

Edit: Ok, the two most viable solutions that I can think of is to print the localized strings in the .cshtml file, like this:

@functions{
    public string LocalizedString()
    {
        return Resource.MyLocalizedString;
    }
}
<input id="LocalizedString" type="hidden" value="@LocalizedString()" />

and then get the value using jquery and the id of the input

$("#LocalizedString").val()

so I can populate a localized.js file that i can reference troughout the application.

The other option is to create a wep api service that serves a json list of the strings that i need in my application.

    public HttpResponseMessage Get()
    {
        var localString = new Dictionary<string, string> {
            {"FullName", Resource.ACC_FullName},
            {"LastName", Resource.ACC_LastName},
            {"FirstName", Resource.ACC_FirstName}
        };
        return Request.CreateResponse(HttpStatusCode.OK, localString);
    }

witch would return this JSON

{
fullName: "Fullt navn",
lastName: "Etternavn",
firstName: "Fornavn"
}

This could then be stored in localstorage ( I know the inital question was knockout related, and this code is angularjs, but i know you can do it in a similar matter with knockout )

gets(): void {
            this.http({ method: 'GET', url: '/api/locals' }).
                success(function (data, status, headers, config) {
                    angular.forEach(data, function (value, key) {
                        localStorage.setItem(key, value);
                    });
                }).
                error(function (data, status, headers, config) {
                    this.$log.warn(data, status, headers, config);
                });
        }

witch can then be used on the pages using

localStorage.getItem('Key')

EDIT: in the case of AngularJS you can just utlilize $http inbuilt cache, pretty smart.

The first solution will probably make the variables availabe in the DOM faster, atleast they'll be there when the scrips execute, but I don't like the idea of cluttering my html with stuff that's not really supposed to be there. The other solution cleans up the html, but i'd have to make a api call to get the values, and the values would not be availabe untill that call was returned. witch means I'd probably need to delay the execution of scripts that rely on the values beeing there until it's done. But the response isn't going to be very large, we are talking maybe 50-100 strings in total (for my site atleast).

Now, I haven't implemented any of these solutions myself yet, and I don't know if they are any good. So if anyone got any comments or ideas i'd like to hear them.

Answer 1

I had a similar problem. Since I have no experience with Knockout.js I am not sure if it helps you. I have a string named Test in my resource file and I am able to have it shown on the front end using the following line of code in my cshtml:

@Html.Raw(WmsWebMvcProto.Properties.Resources.Test)