带有 MVVM 初始化的 Kendo TabStrip 中的 Kendo 拆分器

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 年第一季度版本中发生了变化；你不应该再打电话给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));
    });
});

（更新demo）