I'm using the containerless flow control syntax for whether or not I should show an item in a select list when a user goes to an edit modal. I seem to be having troubles with IE8 on getting this to work. From what I have been reading IE8 strips out the comments in the select. Great.
Options I see
Is there a way to make this to work cross browser without having to make the extra service call for the final list?
Here is my code for the select list
<tr>
<td><label for="EditStatus">Status</label></td>
<td><select id="EditStatus" class="" name="EditStatus" data-bind="value: editStatus" >
<option value="" selected>Select...</option>
<!-- ko if: editStatusCanShowActive() -->
<option value="A">Active</option>
<!-- /ko -->
<!-- ko if: editStatusCanShowInactive() -->
<option value="I">Inactive</option>
<!-- /ko -->
<!-- ko if: editStatusCanShowHold() -->
<option value="H">Hold</option>
<!-- /ko -->
<!-- ko if: editStatusCanShowLocked() -->
<option value="L">Locked</option>
<!-- /ko -->
</select></td>
</tr>
One option would be to build a list in your view model like:
this.availableStatuses = ko.computed(function() {
var statuses = [];
if (this.editStatusCanShowActive()) {
statuses.push({ name: "Active", value: "A" });
}
if (this.editStatusCanShowInactive()) {
statuses.push({ name: "Inactive", value: "I" });
}
if (this.editStatusCanShowHold)) {
statuses.push({ name: "Hold", value: "H" });
}
if (this.editStatusCanShowLocked()) {
statuses.push({ name: "Locked", value: "I" });
}
return statuses;
}, this);
Then, bind in your UI like:
<select data-bind="options: availableStatuses, optionsText: 'name', optionsValue: 'value', value: editStatus"></select>