KO LightBox バインディング

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

autoPlay
clickPause
closeOnEscape
closeOnOuterClick
delay
disabled
keyNav

loop
modal
showControlsOnHover
showCounter
showNavButtons
showTimer
textPosition

例：

この例では、ライトボックスと組み合わせて使用する ViewModel が定義されています。このビューには、disabled、firstDayOfWeek、viewType、nextTooltip、および prevTooltip プロパティがバインドされています。これらのいずれかの値が変更されると、ウィジェットは自動的にその変化に応答します。ウィジェットは、これらの値を変更する際に ViewModel の値も更新します。

ViewModel の作成：

ViewModel スクリプト	コードのコピー
var viewModel = function () { var self = this; self.disabled = ko.observable(false); self.textPosition = ko.observable("overlay"); self.showCounter = ko.observable(true); self.showNavButtons = ko.observable(true); self.showTimer = ko.observable(false); self.showControlsOnHover = ko.observable(true); self.clickPause = ko.observable(false); self.keyNav = ko.observable(false); self.modal = ko.observable(false); self.closeOnEscape = ko.observable(true); self.closeOnOuterClick = ko.observable(true); self.autoPlay = ko.observable(false); self.delay = ko.numericObservable(2000); self.loop = ko.observable(true); };

ViewModel スクリプト

コードのコピー

var viewModel = function () {  
    var self = this;  
       self.disabled = ko.observable(false); 
       self.textPosition = ko.observable("overlay");
       self.showCounter = ko.observable(true);
       self.showNavButtons = ko.observable(true);
       self.showTimer = ko.observable(false);
       self.showControlsOnHover = ko.observable(true);
       self.clickPause = ko.observable(false);
       self.keyNav = ko.observable(false);
       self.modal = ko.observable(false);
       self.closeOnEscape = ko.observable(true);
       self.closeOnOuterClick = ko.observable(true);
       self.autoPlay = ko.observable(false);
       self.delay = ko.numericObservable(2000);
       self.loop = ko.observable(true);
};

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

ビューのマークアップ	コードのコピー
<div id="lightbox" data-bind="wijlightbox: { disabled: disabled, textPosition: textPosition, showCounter: showCounter, showNavButtons: showNavButtons, showTimer: showTimer, showControlsOnHover: showControlsOnHover, clickPause: clickPause, keyNav: keyNav, modal: modal, closeOnEscape: closeOnEscape, closeOnOuterClick: closeOnOuterClick, autoPlay: autoPlay, delay: delay, loop: loop}"> </div>

ビューのマークアップ

コードのコピー

<div id="lightbox" data-bind="wijlightbox: {
    disabled: disabled, 
    textPosition: textPosition, 
    showCounter: showCounter, 
    showNavButtons: showNavButtons, 
    showTimer: showTimer, 
    showControlsOnHover: showControlsOnHover, 
    clickPause: clickPause, 
    keyNav: keyNav, 
    modal: modal, 
    closeOnEscape: closeOnEscape,
    closeOnOuterClick: closeOnOuterClick, 
    autoPlay: autoPlay, 
    delay: delay, 
    loop: loop}">
</div>

関連トピック

参照