OSS で利用できる機能
コンボ ボックス - KnockoutJS のバインド
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
注: Knockout 拡張機能は ASP.NET MVC ヘルパーとは動作しません。
このサンプルでは、KnockoutJS データ バインディングによって処理されるデータを igCombo にバインドする方法を紹介します。コンボのドロップダウンに配列をバインドし、model プロパティをコンボの選択項目にバインドします。
このサンプルでは、KnockoutJS データ バインディングによって処理されるデータを igCombo にバインドする方法を紹介します。コンボのドロップダウンに配列をバインドし、model プロパティをコンボの選択項目にバインドします。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
</head>
<body>
<style>
label { display: inline-block; }
.title {margin-left: 10px;}
.horizontal-container { padding: 10px; margin-left:10px;}
.horizontal-container .input-add-actor { width: 196px; height: 22px; border-radius: 4px; border: 1px solid #4F4F4F; font-size: 17px; }
.horizontal-container input[type=button] { margin-left: 20px; font-size: 14px; vertical-align: top; }
.horizontal-container select { border-radius: 4px; border: 1px solid #4F4F4F; width: 200px; }
</style>
<script src="/js/external/knockout-latest.js" type="text/javascript"></script>
<script src="/js/external/knockout.mapping-latest.js" type="text/javascript"></script>
<script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/extensions/infragistics.ui.combo.knockout-extensions.js"></script>
<script type="text/javascript">
// http://www.imdb.com/find?q=Ivan+Ivanov&s=nm
var model = [
{ name: "Adam Sandler", id: "nm0001191" },
{ name: "Brooke Shields", id: "nm0000222" },
{ name: "Charles Chaplin", id: "nm0000122" },
{ name: "Charlize Theron", id: "nm0000234" },
{ name: "Dustin Hoffman", id: "nm0000163" },
{ name: "Hristo Shopov", id: "nm0794885" },
{ name: "Jeremy Irons", id: "nm0000460" },
{ name: "Noomi Rapace", id: "nm0636426" },
{ name: "Nicole Kidman ", id: "nm0000173" },
{ name: "Robert De Niro", id: "nm0000134" },
{ name: "Tom Cruise", id: "nm0000129" },
{ name: "Tom Hanks", id: "nm0000158" }
];
var viewModel = new ViewModel(model);
function ViewModel(actorsList) {
var self = this;
this.actorsList = actorsList;
// The array of actor objects and a computed array of actor names
// for the plain SELECT which cannot work with objects
this.actors = ko.observableArray(self.actorsList);
// The name of the currently selected actor.
this.selectedActor = ko.observableArray([self.actors()[0].id]);
this.index = ko.observable(0);
this.selectedActorName = ko.computed(function () {
var id = self.selectedActor()[0]
for (i = 0; i < self.actorsList.length; i++) {
if (self.actorsList[i].id === id) {
return self.actorsList[i].name;
}
}
});
// Members that facilicate actor list manipulations
this.newActor = ko.observable("");
this.addActor = function () {
var newActObj;
if (self.newActor() !== "" && !self.findActorRecord(self.newActor())) {
newActObj = {
id: "new" + self.index(),
name: self.newActor()
};
self.index(self.index() + 1);
self.actors.push(newActObj);
self.selectedActor([newActObj.id]);
self.newActor("");
}
}
this.removeActor = function () {
self.actors.remove(function (item) {
return item.id === self.selectedActor()[0];
});
self.newActor("");
if (self.actors().length > 0) {
self.selectedActor([self.actors()[0].id]);
}
else {
self.selectedActor("");
}
}
// Members that facilitte IMDB hyperlinks
this.findActorRecord = function (selectedActor) {
for (var i = 0; i < self.actors().length; i++) {
if (self.actors()[i].name === selectedActor) {
return self.actors()[i];
}
}
}
this.imdb_url = ko.computed(function () {
var actor = self.findActorRecord(self.selectedActor());
if (actor && actor.id) {
return "http://www.imdb.com/name/" + actor.id + "/";
}
else {
return "http://www.imdb.com/find?q=" + encodeURIComponent(self.selectedActorName()) + "&s=nm";
}
});
this.actorName_imdb = ko.computed(function () {
return self.selectedActorName() + " at IMDB";
});
}
$(function () {
ko.applyBindings(viewModel);
setListLength();
viewModel.actors.subscribe(setListLength);
$(".horizontal-container input[type=button]").each(function () {
$(this).igButton({
labelText: $(this).val(),
centerLabel: true,
width: 80,
height: 32
});
});
});
function setListLength() {
$("#listboxActors").attr("size", viewModel.actors().length);
}
</script>
<h2 class="title">お気に入り映画俳優</h2>
<div class="horizontal-container">
<label>選択した映画俳優:</label>
<a data-bind="attr: { href: imdb_url, title: actorName_imdb }, text: selectedActorName" href="#" target="_blank"></a>
</div>
<div class="horizontal-container">
<input data-bind="value: newActor" type="text" class="input-add-actor"/>
<input data-bind="click: addActor" type="button" value="追加"/>
</div>
<div class="horizontal-container">
<span id="comboActors" data-bind="igCombo: {
dataSource: actors,
textKey: 'name',
valueKey: 'id',
selectedItems: selectedActor,
width: '200',
mode: 'dropdown',
enableClearButton: false
}"></span>
<input data-bind="click: removeActor" type="button" value="削除"/>
</div>
<div class="horizontal-container">
<select id="listboxActors" data-bind="options: actors, selectedOptions: selectedActor, optionsValue: 'id', optionsText: 'name'"></select>
</div>
</body>
</html>