Wijmo ユーザーガイド > 概念 > ウィジェットを統合するフレームワーク > Knockoutの使用 > 双方向のライブバインディング > KO Carousel バインディング |
データバインディングのオプション:
例:
この例では、カルーセルと組み合わせて使用する ViewModel が定義されています。このビューには、disabled、showPager、および loop プロパティがバインドされています。これらのいずれかの値が変更されると、ウィジェットは自動的にその変化に応答します。ウィジェットは、これらの値を変更する際に ViewModel の値も更新します。ページャが表示され、画像を最初からループバックできます。
ViewModel の作成:
ViewModel スクリプト |
コードのコピー |
---|---|
var viewModel = function () { var self = this; self.disabled = ko.observable(false); self.showPager = ko.observable(true); self.loop = ko.observable(true); }; |
バインドコントロールを使用したビューの作成:
ビューのマークアップ |
コードのコピー |
---|---|
<div data-bind="wijcarousel: {disabled: disabled, showPager: showPager, loop: loop}"> <ul> <li><img src="http://lorempixum.com/750/300/sports/1" alt="Sports 1" /></li> <li><img src="http://lorempixum.com/750/300/sports/2" alt="Sports 2"></li> <li><img src="http://lorempixum.com/750/300/sports/3" alt="Sports 3" /></li> </ul> </div> |