Knockout issue displaying content based on dropdown value

Knockout issue displaying content based on dropdown value

As you can see the Array selectedChoice works fine in the dropdown and
displays content based on the dropdown selected value.
However, when I try to use a CountryModel with properties id and name it
is trowing errors in internet explorer but not in firefox. however, is odd
that the default behavior is not to hide the content
This content appear when US is selected
I suspect this code
<section data-bind="visible: selectedChoiceWithModel().name==='US'">
I also tried this
<section data-bind="if: selectedChoiceWithModel().name === 'Russia',
hasfocus: selectedChoiceWithModel().name === 'Russia'">
<p>This content appear when Russia is selected</p>
Two issues:

Typescript code
class CountryModel {
id: number;
name: string;
}
compiles to
var CountryModel = (function () {
function CountryModel() {
}
return CountryModel;
})();
Typescript Code /// /// ///
class ViewModel {
constructor()
{
//initialize the data for the model now this has two purposes.
Consider separating the model from its data generation.
var x = new CountryModel();
x.id = 1;
x.name = "Russia";
var y = new CountryModel();
y.id = 2;
y.name = "US";
this.countries.push(x);
this.countries.push(y);
}
availableDrugs = ['A', 'B', 'others'];
firstName: KnockoutObservable<string> = ko.observable();
isVisible: KnockoutObservable<boolean> = ko.observable(true);
selectedChoice = ko.observable();
selectedChoiceWithModel = ko.observable();
countries: KnockoutObservableArray<CountryModel> =
ko.observableArray([]);
sendMe = function () {
alert(ko.toJSON({ selectedCountryId: this.selectedChoice() }));
};
}
$(() => {
ko.applyBindings(new ViewModel(), document.getElementById("model"));
});
Compiles to
/// <reference path="CountryModel.ts" />
/// <reference path="../Scripts/typings/knockout/knockout.d.ts" />
/// <reference path="../Scripts/typings/jquery/jquery.d.ts" />
var ViewModel = (function () {
function ViewModel() {
this.availableDrugs = ['A', 'B', 'others'];
this.firstName = ko.observable();
this.isVisible = ko.observable(true);
this.selectedChoice = ko.observable();
this.selectedChoiceWithModel = ko.observable();
this.countries = ko.observableArray([]);
this.sendMe = function () {
alert(ko.toJSON({ selectedCountryId: this.selectedChoice() }));
};
//initialize the data for the model now this has two purposes.
Consider separating the model from its data generation.
var x = new CountryModel();
x.id = 1;
x.name = "Russia";
var y = new CountryModel();
y.id = 2;
y.name = "US";
this.countries.push(x);
this.countries.push(y);
}
return ViewModel;
})();
$(function () {
ko.applyBindings(new ViewModel(), document.getElementById("model"));
});
Html code
<!--http://jsfiddle.net/pkysylevych/dqUAz/2/
http://stackoverflow.com/questions/12516123/use-knockout-to-hide-display-questions-based-on-selected-value-in-drop-down
http://jsbin.com/egacil/2/edit
http://www.codeproject.com/Articles/342244/Knockout-that-cascading-dropdown
-->
@section scripts
{
<script src="~/js/RequestFormModel.js"></script>
<script src="~/js/CountryModel.js"></script>
}
<div id="model">
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>First name: <input data-bind="value: firstName" /></p>
<input type="checkbox" data-bind="checked: isVisible"/>
<div data-bind="if: isVisible">Hide this content.</div>
<!--Display content usign observable array-->
<select data-bind="options: availableDrugs, value: selectedChoice,
optionsCaption: 'choose..'"></select>
<input type="text" data-bind="value: firstName, visible:
selectedChoice() === 'others', hasfocus: selectedChoice() ===
'others'" />
<section data-bind="visible: selectedChoice() === 'A', hasfocus:
selectedChoice() === 'A'">
<p> This content appear when a is selected</p>
</section>
<section data-bind="visible: selectedChoice() === 'B', hasfocus:
selectedChoice() === 'B'">
<p>This content appear when B is selected</p>
</section>
<!---Sample number two with models instead of just an array -->
<select data-bind="options: countries, optionsText: 'name', value:
selectedChoiceWithModel, optionsCaption: 'Choose...'"></select>
<section data-bind="visible:
selectedChoiceWithModel().name==='US'">
<p>This content appear when US is selected</p>
</section>
</div>