Knockout.js URL 编码

Question

我的页面上有一些 Knockout.js 代码，根据下拉列表的选定值生成可下载文件列表 - 下载源位于 SQL 数据库中，并且我只存储物理文件名 - 列表通过 ASP.Net MVC 控制器操作以 Json 格式返回到页面。相关的淘汰赛代码是：

$(document).ready(function() {

    function DDLViewModel() {

        var self = this;
        self.ddlDim1 = ko.observableArray([]);
        self.selectedDim1 = ko.observable();
        self.selectedDim1.subscribe(FetchVariant);

        //default values from Model
        self.PDFs = ko.observableArray(@Html.Raw(Json.Encode(Model.PDFs)));

        function FetchVariant() {
            if (self.selectedDim1())
            {
                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("GetVariant")', // we are calling json method
                    dataType: 'json',
                    // here we get value of selected dim.
                    data: { productId: @Model.Product.ProductID,
                        Dim1: self.selectedDim1()
                    },
                    success: function (variant) {
                        // variant contains the JSON formatted variant data passed from the controller
                        var newpv = [];
                        newpv.push(variant);
                        self.PDFs(newpv[0].PDFs);
                    },
                    error: function (ex) {
                        //alert('Failed to retrieve variant.' + ex);
                        self.PDFs(@Html.Raw(Json.Encode(Model.PDFs)));
                    }
                });
            }
            else
            {
                //not selected so reset all values back to Model
                self.PDFs(@Html.Raw(Json.Encode(Model.PDFs)));
            }
        }


    }

    ko.applyBindings(new DDLViewModel);
})

<div data-bind="visible: PDFs().length">
    <h3>Downloads</h3>
    <!-- ko foreach: PDFs -->
    <p><a data-bind="attr: { href: '/artwork/ProdPDF/' + FileName }, text: Title" target="_blank"></a></p>
    <!-- /ko -->
</div>

我遇到的问题是文件名没有被编码，所以任何带有“&”字符的文件名都不起作用。有没有办法在 Knockout 代码中对 url/filename 进行内联编码？

Answer 1

当然，使用 encodeURIComponent。

<p><a data-bind="attr: { href: '/artwork/ProdPDF/' + encodeURIComponent(FileName) }, text: Title" target="_blank"></a></p>

Knockout.js URL 编码

Knockout.js URL Encoding

url

knockout.js

url-encoding