Question

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

这曾经在某个时间点工作，但页面正在进行大量构建，现在无法正常工作。 当我选择新的优惠类型时，另一个下拉列表不会重新填充。

这是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());  
        }

Answer 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());

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

Knockout只计算一次射击

1 个答案: