javascript - Kendo UI Splitview 刷新 Pane 内容

Question

我使用 Kendo UI splitview .

我创建了一个用于导航的 Pane (左)和一个用于内容的 Pane (右)。

我在左 Pane 中有 4 个导航链接，如下所示:

<div data-role="pane" id="side-pane" data-layout="side-default"
        data-transition="slide">
        <div data-role="view" data-title="test" id="side-root">
            <ul data-role="listview" style="height: 250px" data-style="inset"
                data-style="inset" data-type="group">

                <li>Categories
                    <ul>
                        <li onclick="createChart()" data-icon="arrow-e"><a>1</a></li>
                    </ul>
                    <ul>
                        <li onclick="createLineChart()" data-icon="test"><a>2</a></li>
                    </ul>
                    <ul>
                        <li onclick="createMap()" data-icon="world"><a>3</a></li>
                    </ul>

                </li>
            </ul>
        </div>







    </div>

对于右 Pane ，一个 div 用于 map ，两个 div 用于图表，如下所示:

<div data-role="pane" data-layout="main-default" id="main-pane">
        <div id="forms" data-role="view" data-title="Form Elements"
            data-init="initForm" data-use-native-scrolling="true" data-show="detailViewShown">





            <div id="map" ></div>
            <div id="chart"></div>
            <div id="linechart"></div>




        </div>

问题是:当我单击“1”时，图表完美创建。发生这种情况后，我单击“2”，应创建新图表，并删除旧图表，但新图表出现在图表“1”下方。单击导航项后如何刷新或设置新的右 Pane 内容？ map 也有同样的问题。

Answer 1

您应该将data-init更改为data-show

<div data-init="initForm">

到

<div data-show="initForm">

解释如下:

difference between data-show and data-init