Kendo TabStrip中的Kendo Splitter，帶有MVVM init

Question

我在Kendo選項卡中有一個帶有Kendo拆分器的頁面，並且使用kendo.init方法實例化了它們。 有兩個選項卡，拆分器控件在第二個選項卡中。 當我單擊第二個選項卡時，拆分器控件未正確初始化。 分割器的分割器不是正確的高度。

我整理了一個示例頁面來演示此行為：

HTML：

<div id="testContainer">
    <div 
        id="testTabStrip"
        data-role="tabstrip">
        <ul>
            <li class="k-state-active">Tab1</li>
            <li>Tab2</li>
        </ul>
        <div>
            <div id="tab1-content">
                Tab One Content
            </div>
        </div>
        <div>
            <div id="tab2-content">
                <div data-role="splitter"
                    data-panes="[
                        { collapsible: true, size: '300px' },
                        { collapsible: true }
                    ]" 
                    style="min-height:700px">
                    <div id="Left-Pane">
                        Left Pane Content
                    </div>
                    <div id="Right-Pane">
                        Right Pane Content
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JavaScript的：

$(document).ready(function() {
    kendo.init($('#testContainer'));
    $('#testTabStrip').bind('select', function (e) {
        setTimeout(function () {
            $(e.contentElement).find(".k-splitter").each(function () {
                $(this).data("kendoSplitter").trigger("resize");
            },300);
        });
    });
});

這是上面代碼的小提琴： http : //jsfiddle.net/codeowl/2nq5z/3/

您可以在此示例中看到，我試圖實現一種在Web上找到的變通辦法，以在tabstrip的select事件上觸發拆分器的resize事件。 但是，這沒有用。

我該如何解決這個問題？

謝謝你的時間，

問候，

斯科特

Answer 1

調整大小的方法在2014年Q1版本中已更改； 您不應再調用widget.trigger("resize") 。 而是使用kendo.resize() ; 同樣，您應該綁定到activate事件，以便在調用處理程序時可見e.contentElement ； 這樣，您就不需要setTimeout ：

$(document).ready(function () {
    kendo.init($('#testContainer'));
    var tabStrip = $('#testTabStrip').data("kendoTabStrip");

    tabStrip.bind('activate', function (e) {
        kendo.resize($(e.contentElement));
    });
});

（ 演示更新）