将ServerSide数据导入JavaScript对象构造函数

时间:2016-03-15 15:02:21

标签: javascript asp.net asp.net-mvc object constructor

我正在使用ASP.NET MVC,我有一个简单的要求。我需要能够注射"两个服务器端值到我的JavaScript对象中。

我的JavaScript对象存在于我的项目引用的单独的js文件中但是我需要能够在第一次使用它之前将数据注入到我的对象中。

我的代码目前看起来像这样。

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;
    };

});

并在我的_Layout.cshtml页面中调用它。

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

但由于BuildImageUrl未定义,此代码似乎无法正常工作。我假设这是因为我实际上并没有通过在声明时使用()调用它来初始化并返回我的UrlBuilder对象。

我有点意识到不同类型的JavaScript对象模式(即文字,功能等),但我完全不确定'正确'模式和方法是解决我的特定问题。

有什么建议吗?

1 个答案:

答案 0 :(得分:1)

对于this.BuildImageUrl真正意味着assign BuildImageUrl to my UrlBuilder object,您必须使用new关键字正确构建对象。

区别在于:

1-没有newthis指的是执行时存在的当前上下文,在这种情况下,我说它是全局窗口对象。因此,UrlBuilder.BuildImageUrl始终为空,因为您在技术上做window.BuildImageUrl = ...

2-使用new

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

this现在正确引用了新的builder对象。因此将定义builder.BuildImageUrl

如果要访问新构建器,可以执行以下操作:

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

从任何地方开始:

urlBuilder.BuildImageUrl(...)

注意:取决于您正在使用的框架(或者如果您甚至使用一个框架),例如角度,可能会比做{{}更好的方式1}}因为这通常被称为"污染全球状态"。但很多时候,这就是你所需要的。