我刚刚创建了一个 jsfiddle，以便您可以快速编辑 JSFIDDLE Link to Code
如您所见，Array selectedChoice在下拉列表中工作正常，并根据下拉选择的值显示内容。
但是，当我尝试使用CountryModel带有属性 id 和名称的 a 时，它会在 Internet Explorer 中引发错误，但在 Firefox 中则不会。但是，奇怪的是默认行为不是隐藏内容 <p>This content appear when US is selected</p>
我怀疑这段代码
<section data-bind="visible: selectedChoiceWithModel().name==='US'">
我也试过这个
<section data-bind="if: selectedChoiceWithModel().name === 'Russia',
hasfocus: selectedChoiceWithModel().name === 'Russia'">
<p>This content appear when Russia is selected</p>
两个问题：
打字稿代码
class CountryModel {
id: number;
name: string;
}
编译为
var CountryModel = (function () {
function CountryModel() {
}
return CountryModel;
})();
打字稿代码 /// /// ///
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"));
});
编译为
/// <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代码
<!--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>