2012-12-15 67 views
6

我正在使用RPNiemeyer的kendo-knockout庫。我有我在HTML中使用這樣的劍道窗口:Kendo-Knockout:如何居中窗口

<div data-bind="kendoWindow: { isOpen: isOpen, title:'States', width: 600, height: 150, modal: true, resizable: false, actions: ['Maximize', 'Close'] }" > </div> 

我曾經中心這樣的對話:

$('#productionStates').data("kendoWindow").center(); 

但作爲center是一種方法,我不能將它傳遞的標記像這樣center: true。在kendo-knockout文檔中,有一些小部件的屬性小部件,我的猜測是這是關鍵,但我不確定如何使用它,因爲沒有示例。任何想法都會受到歡迎。謝謝!

回答

7

widget參數旨在用於需要以提供的綁定選項不支持的方式與窗口小部件進行交互時使用的參數。通常情況下,這是最後一招,但在這種情況下,它看起來是正確的選擇。

你所做的就是將一個可觀測值傳遞給widget參數,並且它會被實際的部件填充。然後,您可以從視圖模型中調用方法。

喜歡的東西:

var ViewModel = function() { 
    this.isOpen = ko.observable(false); 
    //center it if it is opened 
    this.isOpen.subscribe(function(newValue) { 
     if (newValue) { 
      this.myWidget().center();   
     } 
    }, this); 

    //hold the widget 
    this.myWidget = ko.observable(); 
}; 

然後,在標記:

<div data-bind="kendoWindow: { isOpen: isOpen, visible: false, modal: true, widget: myWidget }"> 
    ... 
</div>​ 

樣品在這裏:http://jsfiddle.net/rniemeyer/gNgDm/

+0

謝謝!您是否打算將此功能作爲布爾屬性添加到您的庫中?根據我的經驗,每當我需要一個模態窗口時,它都需要居中。爲什麼總是編寫邏輯來調用方法來明確這麼做? – Mdb

+0

這有點具有挑戰性,因爲沒有'center' /'uncenter'的概念,並且沒有事件知道窗口是不是居中(將其設置爲false)還是現在居中(將其設置爲true)。它確實看起來應該是Kendo UI支持的配置選項。我不得不多想一些,但它不太適合正常的「綁定」模式。我當然可以看到它會如何更方便。 –

6

我實際上是在綁定處理堅持它實現爲尼邁耶同樣的效果:

 

    ko.bindingHandlers.kendoWindow.options = { 
     open: function() { this.element.data('kendoWindow').center(); } 
    }; 

不需要額外的綁定,但它確實綁定了「onOpen」事件。