Feeding ServerSide data into JavaScript object constructor

Question

I am using ASP.NET MVC and I have a simple requirement. I need to be able to "inject" two server side values into my JavaScript object.

My JavaScript object lives in a separate js file referenced by my project BUT I need to be able to inject data into my object prior to it being used for the first time.

My code currently looks like this.

var ImageSizeEnum = {
    Small: 0,
    Medium: 1,
    Large: 2
};

var UrlBuilder = (function (baseImageUrl, storageContainer) {

    var _baseImageUrl = baseImageUrl;
    var _storageContainer = storageContainer;

    this.BuildImageUrl = function (stockImage, imageSizeEnum) {
            var imageSizeString = "";
            switch (imageSizeEnum) {
                case ImageSizeEnum.Small:
                    imageSizeString = "sm";
                    break;
                case ImageSizeEnum.Medium:
                    imageSizeString = "md";
                    break;
                case ImageSizeEnum.Large:
                    imageSizeString = "lg";
                    break;
            }

            var url = kendo.format(_baseImageUrl + "_{2}{3}", _storageContainer, stockImage.AzureId, imageSizeString, stockImage.Extension);
            return url;
    };

});

and it is invoked in my _Layout.cshtml page like this.

$(function () {
    UrlBuilder("@WebConfigSettings.BaseImageUrlPath", "@WebConfigSettings.AzureStorageContainer");
});

But this code doesn't appear to work as I expected due to BuildImageUrl being undefined. I assume this is because I am not actually initializing and returning my UrlBuilder object by invoking it with () at declaration.

I am somewhat aware of the different types of JavaScript object patterns (i.e. literals, function etc) but I am completely uncertain about what the 'correct' pattern and approach is to solve my particular problem.

Any suggestions?

mrahhal · Accepted Answer · 2016-03-15 15:28:35Z

1

For this.BuildImageUrl to really mean assign BuildImageUrl to my UrlBuilder object you'll have to properly construct the object using the new keyword.

The difference being:

1- Without new: this refers to whatever current context exists while executing, in this case I'd say it's the global window object. So UrlBuilder.BuildImageUrl will always be null because you're technically doing window.BuildImageUrl = ...

2- With new:

var builder = new UrlBuilder(
    "@WebConfigSettings.BaseImageUrlPath", "@WebConfigSettings.AzureStorageContainer");

this now correctly refers to the new builder object. So builder.BuildImageUrl will be defined.

If you want to access the new builder you can do something like:

window.urlBuilder = new UrlBuilder(
    "@WebConfigSettings.BaseImageUrlPath", "@WebConfigSettings.AzureStorageContainer");

And so from anywhere:

urlBuilder.BuildImageUrl(...)

Note: depending on the framework you're using (or if you're even using one), for example angular, there might be a much better way than doing window.urlBuilder since this is commonly referred to as "polluting the global state". But many times this is all you need.

edited Mar 15, 2016 at 15:28

answered Mar 15, 2016 at 15:13

mrahhal

3,5371 gold badge25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Maxim Gershkovich Over a year ago

Thanks very much, sincerely appreciate the breakdown.

Collectives™ on Stack Overflow

Feeding ServerSide data into JavaScript object constructor

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related