KO Gallery バインディング

データバインディングのオプション：

autoPlay
disabled
interval
showCaption
showCounter
showPager
showTimer
thumbnails
thumbsDisplay

例：

この例では、ギャラリーと組み合わせて使用する ViewModel が定義されています。このビューには、disabled、autoPlay、showTimer、interval、showCaption、showCounter、showPager、および thumbsDisplay プロパティがバインドされています。これらのいずれかの値が変更されると、ウィジェットは自動的にその変化に応答します。ウィジェットは、これらの値を変更する際に ViewModel の値も更新します。

ViewModel の作成：

ViewModel スクリプト	コードのコピー
var viewModel = function () { var self = this; self.disabled = ko.observable(false); 　　　self.autoPlay = ko.observable(false); 　　　self.showTimer = ko.observable(true); 　　　self.interval = ko.observable(5000); 　　　self.showCaption = ko.observable(true); 　　　self.showCounter = ko.observable(true); self.showPager = ko.observable(false); self.thumbsDisplay = ko.observable(5); };

ViewModel スクリプト

コードのコピー

var viewModel = function () {  
    var self = this;  
       self.disabled = ko.observable(false);
        　　　self.autoPlay = ko.observable(false);
        　　　self.showTimer = ko.observable(true);
        　　　self.interval = ko.observable(5000);
        　　　self.showCaption = ko.observable(true);
        　　　self.showCounter = ko.observable(true);
                self.showPager = ko.observable(false);
                self.thumbsDisplay = ko.observable(5);
};

バインドコントロールを使用したビューの作成：

ビューのマークアップ	コードのコピー
<div data-bind="wijgallery: { disabled: disabled, autoPlay: autoPlay, showTimer: showTimer, interval: interval, showCaption: showCaption, showCounter: showCounter, showPager: showPager, thumbsDisplay: thumbsDisplay }"> <ul class=""> <li class=""><a href="http://lorempixum.com/750/300/sports/1"> <img alt="1" src="http://lorempixum.com/200/150/sports/1" title="Word Caption 1" /> </a></li> <li class=""><a href="http://lorempixum.com/750/300/sports/2"> <img alt="2" src="http://lorempixum.com/200/150/sports/2" title="Word Caption 2" /> </a></li> <li class=""><a href="http://lorempixum.com/750/300/sports/3"> <img alt="3" src="http://lorempixum.com/200/150/sports/3" title="Word Caption 3" /> </a></li> <li class=""><a href="http://lorempixum.com/750/300/sports/4"> <img alt="4" src="http://lorempixum.com/200/150/sports/4" title="Word Caption 4" /> </a></li> <li class=""><a href="http://lorempixum.com/750/300/sports/5"> <img alt="5" src="http://lorempixum.com/200/150/sports/5" title="Word Caption 5" /> </a></li> <li class=""><a href="http://lorempixum.com/750/300/sports/6"> <img alt="6" src="http://lorempixum.com/200/150/sports/6" title="Word Caption 6" /> </a></li> <li class=""><a href="http://lorempixum.com/750/300/sports/7"> <img alt="7" src="http://lorempixum.com/200/150/sports/7" title="Word Caption 7" /> </a></li> <li class=""><a href="http://lorempixum.com/750/300/sports/8"> <img alt="8" src="http://lorempixum.com/200/150/sports/8" title="Word Caption 8" /> </a></li> <li class=""><a href="http://lorempixum.com/750/300/sports/9"> <img alt="9" src="http://lorempixum.com/200/150/sports/9" title="Word Caption 9" /> </a></li> <li class=""><a href="http://lorempixum.com/750/300/sports/10"> <img alt="10" src="http://lorempixum.com/200/150/sports/10" title="Word Caption 10" /> </a></li> </ul> </div>

ビューのマークアップ

コードのコピー

<div data-bind="wijgallery: {    disabled: disabled,     autoPlay: autoPlay,     showTimer: showTimer,     interval: interval,     showCaption: showCaption,    showCounter: showCounter,     showPager: showPager,     thumbsDisplay: thumbsDisplay }">    <ul class="">        <li class=""><a href="http://lorempixum.com/750/300/sports/1">            <img alt="1" src="http://lorempixum.com/200/150/sports/1" title="Word Caption 1" />        </a></li>        <li class=""><a href="http://lorempixum.com/750/300/sports/2">            <img alt="2" src="http://lorempixum.com/200/150/sports/2" title="Word Caption 2" />        </a></li>        <li class=""><a href="http://lorempixum.com/750/300/sports/3">                     <img alt="3" src="http://lorempixum.com/200/150/sports/3" title="Word Caption 3" />        </a></li>        <li class=""><a href="http://lorempixum.com/750/300/sports/4">                     <img alt="4" src="http://lorempixum.com/200/150/sports/4" title="Word Caption 4" />         </a></li>        <li class=""><a href="http://lorempixum.com/750/300/sports/5">                     <img alt="5" src="http://lorempixum.com/200/150/sports/5" title="Word Caption 5" />        </a></li>        <li class=""><a href="http://lorempixum.com/750/300/sports/6">                     <img alt="6" src="http://lorempixum.com/200/150/sports/6" title="Word Caption 6" />        </a></li>        <li class=""><a href="http://lorempixum.com/750/300/sports/7">                     <img alt="7" src="http://lorempixum.com/200/150/sports/7" title="Word Caption 7" />        </a></li>        <li class=""><a href="http://lorempixum.com/750/300/sports/8">                     <img alt="8" src="http://lorempixum.com/200/150/sports/8" title="Word Caption 8" />        </a></li>        <li class=""><a href="http://lorempixum.com/750/300/sports/9">                     <img alt="9" src="http://lorempixum.com/200/150/sports/9" title="Word Caption 9" />        </a></li>        <li class=""><a href="http://lorempixum.com/750/300/sports/10">                 <img alt="10" src="http://lorempixum.com/200/150/sports/10" title="Word Caption 10" />        </a></li>    </ul>  </div>

関連トピック

参照