Knockoutjs-selectedoptions-binding
提供:Dev Guides
KnockoutJS-selectedOptionsバインディング
このバインディングは、複数リスト選択フォームコントロールで現在選択されている要素を操作するために使用されます。 このバインディングは、オプションバインディングおよび<select>フォームコントロールでのみ使用できます。
ユーザーが複数選択リストでアイテムを選択または選択解除すると、対応する値がビューモデルの配列に追加または削除されます。 Observable配列の場合、UIで選択または選択解除された項目もViewModelの配列で更新され、双方向バインディングメソッドになります。
構文
selectedOptions: <binding-array>
パラメーター
- ここのパラメーターは配列になります(Observableになることもあります)。 select要素のアクティブなアイテムは、この配列に保存されます。 以前のアイテムは上書きされます。
- パラメーターがObservable配列の場合、選択されたアイテムは、基礎となるObservableが変更されると更新されます。 Observable配列が使用されていない場合、要素は1回だけ処理されます。
例
selectedOptions Bindingの使用方法を示す次の例を見てみましょう。
<!DOCTYPE html>
<head>
<title>KnockoutJS selectedOptions Binding</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
type = "text/javascript"></script>
</head>
<body>
<p>Tutorials Library:<br><br>
<select size = 10 multiple = 'true' data-bind = "
options: availableTutorials,
selectedOptions: selectedTutorials
"></select></p>
<p>(Press control and select for multiple options.)</p>
<p>You have chosen below Tutorials:</p>
<ul data-bind = "foreach: selectedTutorials">
<li>
<span data-bind = "text: $data"> </span>
</li>
</ul>
<script type = "text/javascript">
function ViewModel() {
self = this;
self.availableTutorials = ko.observableArray ([
'Academic','Big Data','Databases',
'Java Technologies','Mainframe',
'Management','Microsoft Technologies',
'Mobile Development','Programming','Software Quality'
]);
self.selectedTutorials = ko.observableArray();
};
var vm = new ViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
出力
上記のコードがどのように機能するかを確認するために、次の手順を実行してみましょう-
- 上記のコードを selectedoptions-bind ファイルに保存します。
- このHTMLファイルをブラウザーで開きます。
- selectedTutorialsは、選択したオプションを保存する配列です。