jsfiddle を作成したので、すばやく編集できます JSFIDDLE コードへのリンク
ご覧のとおりArray selectedChoice、ドロップダウンで正常に動作し、ドロップダウンで選択した値に基づいてコンテンツを表示します。
ただし、プロパティ ID と名前で を使用しようとするとCountryModel、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>
2 つの問題:
タイプスクリプトコード
class CountryModel {
id: number;
name: string;
}
にコンパイルします
var CountryModel = (function () {
function CountryModel() {
}
return CountryModel;
})();
Typescript コード /// /// ///
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>