Knockout computed only firing once [closed] - asp.net-mvc

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have a feeling that this isn't going to be a simple problem (or may be associated with something entirely un-related) but I'm going to take a shot. I have an ASP.NET MVC page that also uses KnockOutJS. There are two related drop-downs on the page. The first one presents a list of Offer Types. Depending on which Offer Type you choose, the second drop-down needs to re-populate with the correct options for that Offer Type.
This used to work at some point in time, but the page is under heavy construction and now not working. When I select a new Offer Type, the other dropdown doesn't repopulate.
Here is the HTML for the DropDowns. You'll notice there is a hidden input there. When I select a new OfferType, this correctly populates with the 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>
And here is the Javascript (data trimmed for brevity):
$(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

Todd, I was able to get your example code working without any problems. I just coppied to jsFiddle and remove the MVC Razor and jquery stuff.
http://jsfiddle.net/zrDtU/
The 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>
The 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());
It looks like your issue is elsewhere.