Question

我有级联选择列表，选择最后一个列表应该获取一些过滤器JSon数据以供在页面中使用 - 基本上是根据用户选择更新页面内容：

function DDLViewModel() {

    var self = this;

    self.ddlDim1 = ko.observableArray([]);
    self.ddlDim2 = ko.observableArray([]);
    self.selectedDim1 = ko.observable();
    self.selectedDim1.subscribe(FetchDim2);
    self.selectedDim2 = ko.observable();
    self.selectedDim2.subscribe(FetchVariant);
    self.prodVariant = ko.observableArray([]);

    function FetchDim2() {
        if(!self.selectedDim1())
        {
            self.ddlDim2.removeAll();
        } else {
            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetDims")', // we are calling json method
                dataType: 'json',
                // here we get value of selected dim.
                data: { id: @Model.Product.ProductID,
                    level: 2,
                    head: '@Model.Product.Level2Head',
                    code: self.selectedDim1()
                },
                success: function (dims) {
                    // dims contains the JSON formatted list of dims passed from the controller
                    self.ddlDim2(dims);
                    self.ddlDim3.removeAll();
                    if(dims.length === 1) {
                        self.selectedDim2(dims[0].Value);
                    }else{
                        self.selectedDim2(null);
                    }
                },
                error: function (ex) {
                    alert('Failed to retrieve dims.' + ex);
                }
            });
        }
    }

    function FetchVariant() {
        $.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(),
                Dim2: self.selectedDim2()
            },
            success: function (variant) {
                // variant contains the JSON formatted variant data passed from the controller                
                alert('hello');
                var newpv = [];
                newpv.push(variant);
                self.prodVariant(newpv);
                alert('hello again');
            }//,
            //error: function (ex) {
            //    alert('Failed to retrieve variant.' + ex);
            //}
        });

    }

}

//var objVM = new DDLViewModel();
ko.applyBindings(new DDLViewModel);

在我的页面中引用：

        <p>Dim 1 : <strong data-bind="text: selectedDim1"></strong></p>
        <p>Dim 2 : <strong data-bind="text: selectedDim2"></strong></p>
        <p>Variant : <strong data-bind="text: prodVariant().length"></strong></p>
        <p>Variant : <strong data-bind="text: prodVariant()[0].ProductCode"></strong></p>

如果省略最后一行，则下拉工作，长度显示为1，这是正确的。在最后一行没有任何作用，我得到错误：

未捕获的TypeError：无法处理绑定“text：function （）{return prodVariant（）[0] .ProductCode}“消息：无法读取属性'ProductCode'未定义$ element.text @

如何重新获取数据，并在页面中实际使用它？数据肯定是JSon，因为它是从MVC JSonResult操作返回的：

{ “VariantID”：19110， “产品ID”：0 “产品代码”： “FW13200BR10”， “描述”：“彩色棕色尺码10 ”， “Level1Code”： “布朗”， “Level1Name”： “布朗”， “Level2Code”： “10”， “Level2Name”： “10”， “Level3Code”： “”， “Level3Name”：空， “建议零售价” ：0.0000 “SellPrice”：21.9500 “QtyAvailable”：0 “AvailabilityID”：0， “可用性”：“通常在3-5个工作日内发送“，”AvailableDate“：null}

修改：

通过这样做工作 - 为我想要替换的元素声明单独的observable：

self.ProductCode = ko.observable(@Model.Product.ProductCode);
self.SellPrice = ko.observable('@Model.Product.SellPrice');

然后从我返回的JSon /数组中手动填充：

function FetchVariant() {
            $.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(),
                    Dim2: self.selectedDim2(),
                    Dim3: self.selectedDim3()
                },
                success: function (variant) {
                    // variant contains the JSON formatted variant data passed from the controller
                    var newpv = [];
                    newpv.push(variant);
                    self.ProductCode(newpv[0].ProductCode);
                    self.SellPrice(newpv[0].SellPrice);
                }
            });

不确定这是不是最好的方法，但它现在正在工作 - 对Knockout来说是全新的，所以可能有点像黑客？

无法处理绑定 - 无法读取未定义的属性

0 个答案: