1

我有一种感觉，这不会是一个简单的问题（或者可能与完全不相关的事情有关），但我要试一试。我有一个也使用 KnockOutJS 的 ASP.NET MVC 页面。页面上有两个相关的下拉菜单。第一个提供了报价类型列表。根据您选择的优惠类型，第二个下拉菜单需要重新填充该优惠类型的正确选项。

这曾经在某个时间点起作用，但是该页面正在繁重的建设中，现在无法正常工作。当我选择新的优惠类型时，其他下拉菜单不会重新填充。

这是 DropDowns 的 HTML。您会注意到那里有一个隐藏的输入。当我选择一个新的 OfferType 时，它​​会正确填充 OfferTypeId。 

<div class="control-group" style="clear: both;">
    @Html.LabelFor(m => m.OfferType, new { @class = "control-label" })
    <div class="controls">
        <select class="input-block-level" id="OfferType" name="OfferType" data-bind="options: offerTypes, value: selectedOfferType, optionsText: 'DisplayName'"></select>
    </div>@Html.HiddenFor(m => m.OfferTypeId, new { data_bind = "value: selectedOfferType().OfferTypeId" })
</div>

<div class="control-group" style="clear: both;">
    @Html.LabelFor(m => m.OfferTypeDetails, new { @class = "control-label" })
    <div class="controls">
        <select class="input-block-level" id="OfferTypeDetails" name="OfferTypeDetails" data-bind="options: offerDetails, value: selectedOffer, optionsText: 'DisplayName'"></select>
    </div>@Html.HiddenFor(m => m.OfferTypeDetailsTypeId, new { data_bind = "value: selectedOffer().OfferTypeId" })
</div>

这是 Javascript（为简洁起见，数据被修剪）：

       $(document).ready(function () {              
            var offerType = function (offerTypeId, displayName, offerTypeDetailsTypes) {
                var self = this;
                self.OfferTypeId = offerTypeId;
                self.DisplayName = displayName;
                self.OfferTypeDetailsTypes = offerTypeDetailsTypes;
            };

            var offerTypeDetailsType = function (offerTypeDetailsTypeId, displayName, offerTypeId) {
                var self = this;
                self.OfferTypeDetailsTypeId = offerTypeDetailsTypeId;
                self.DisplayName = displayName;
                self.OfferTypeId = offerTypeId;
            };  

            function viewModel() {
                var self = this;

                self.selectedOfferType = ko.observable();
                self.selectedOffer = ko.observable();

                self.offerTypes = ko.observableArray([
                    new offerType('1', 'Purchase Discount'),
                    new offerType('2', 'Savings'),
                    ...
                ]);

                self.offerTypeDetailsTypes = ko.observableArray([
                    new offerTypeDetailsType('1', 'Spend $10  Get $1 Off', '1'),
                    new offerTypeDetailsType('2', 'Spend $100  Get 10% Off', '1'),
                    new offerTypeDetailsType('3', '$ Half Off', '2'),
                    ...
                ]);         

                self.offerDetails = ko.computed({
                    read: function () {
                        var activeCategories = ko.observableArray();
                        ko.utils.arrayForEach(self.offerTypeDetailsTypes(), function (item) {
                            if (item.OfferTypeId == self.selectedOfferType().OfferTypeId)
                                activeCategories.push(item);
                        });
                        return activeCategories();
                    } , deferEvaluation: true
                });         
            }
ko.applyBindings(new viewModel());  
        }
4

1 回答 1

1

托德，我能够让您的示例代码正常工作。我只是复制到 jsFiddle 并删除了 MVC Razor 和 jquery 的东西。

http://jsfiddle.net/zrDtU/

html

<select class="input-block-level" id="OfferType" name="OfferType" data-bind="options: offerTypes, value: selectedOfferType, optionsText: 'DisplayName'"></select>

<select class="input-block-level" id="OfferTypeDetails" name="OfferTypeDetails" data-bind="options: offerDetails, value: selectedOffer, optionsText: 'DisplayName'"></select>

javascript

//I can't post a link to jsFiddle without code
var offerType = function (offerTypeId, displayName, offerTypeDetailsTypes) {
    var self = this;
    self.OfferTypeId = offerTypeId;
    self.DisplayName = displayName;
    self.OfferTypeDetailsTypes = offerTypeDetailsTypes;
};

var offerTypeDetailsType = function (offerTypeDetailsTypeId, displayName, offerTypeId) {
    var self = this;
    self.OfferTypeDetailsTypeId = offerTypeDetailsTypeId;
    self.DisplayName = displayName;
    self.OfferTypeId = offerTypeId;
};

function viewModel() {
    var self = this;

    self.selectedOfferType = ko.observable();
    self.selectedOffer = ko.observable();

    self.offerTypes = ko.observableArray([
        new offerType('1', 'Purchase Discount'),
        new offerType('2', 'Savings')
    ]);

    self.offerTypeDetailsTypes = ko.observableArray([
        new offerTypeDetailsType('1', 'Spend $10  Get $1 Off', '1'),
        new offerTypeDetailsType('2', 'Spend $100  Get 10% Off', '1'),
        new offerTypeDetailsType('3', '$ Half Off', '2')
    ]);

    self.offerDetails = ko.computed({
        read: function () {
            var activeCategories = ko.observableArray();
            ko.utils.arrayForEach(self.offerTypeDetailsTypes(), function (item) {
                if (item.OfferTypeId == self.selectedOfferType().OfferTypeId) activeCategories.push(item);
            });
            return activeCategories();
        },
        deferEvaluation: true
    });
}

ko.applyBindings(new viewModel());

看起来你的问题在其他地方。

于 2013-07-09T19:29:55.240 回答