KO Gallery Binding

Data-binding options:

autoPlay
disabled
interval
showCaption
showCounter
showPager
showTimer
thumbnails
thumbsDisplay

Example:

In this example, the ViewModel is defined specifically for use with the gallery. It has disabled, autoPlay, showTimer, interval, showCaption, showCounter, showPager, and thumbsDisplay properties that are bound in the View. If any of these values change, then the widgets will automatically respond to them. The widgets also update the ViewModel values as they modify them.

Create a ViewModel:

ViewModel Script	Copy Code
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 Script

Copy Code

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);

};

Create View with Bound Controls:

View Markup	Copy Code
<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>

View Markup

Copy Code

<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>

See Also

Concepts

Reference