如何动态生成一个基本的 kendoUI 小部件？

Question

我遇到了 Kendo UI 的问题：

当尝试动态生成列表时（我希望它是一个 listView），使用 onShow 方法。它似乎没有附加任何 KendoUI 功能或样式。就像剑道的“小部件生成器”已经完成了它的工作并且不要触摸新添加的内容。

就我而言：

这里是 HTML：

    <div data-role="view" id="profile" data-title="Profile" data-layout="overview-layout" data-show="initProfile">
        <div id="profileContent"></div>

        She/He Might Like:
        <div data-role="scrollview" data-page="0">
            <div class="login-scrollV" id="page1" data-role="page">
            </div><div class="login-scrollV" id="page2" data-role="page">
            </div><div class="login-scrollV" id="page3" data-role="page">
            </div>
        </div>
    </div>

使用 Mustache JS，我动态生成此内容并将其附加到#profileContent

    <script id="profileTemplate" type="text/x-handlebars-template">

        <ul id="profileList" data-role="listview" data-style="inset" data-id="{{id}}" data-type="group">
            <li>Profile
                <ul>
                    <li><h2>{{firstname}} <span>{{lastname}}</span></h2><img src="{{picture}}" /></li>
                    <li>Gender <span class="sales-up">{{genre}}</span></li>
                    <li>Notation <span class="sales-up">Not Yet Ready</span></li>
                </ul>
            </li>
            <li>Center Of Interests
                <ul>
                    <li>Rock</li>
                    <li>Opera</li>
                    <li>Exhibitions</li>
                </ul>
            </li>
        </ul>

    </script>

最后，内容是按照我告诉 Mustache 的方式生成的，但 Kendo 并没有将它的任何功能应用于这个 listView 或任何样式。

我明白为什么（我假设 html 从一开始就应该在那里），所以我的问题是： 如何找到一种解决方法，使用 onShow 方法动态创建一个列表视图，该方法带有 Kendo UI 可以识别的 Mustache 把手（理想情况下），然后将列表视图功能应用于它？

非常感谢

Answer 1

您可能需要在 profileContent div 上运行 kendo.bind 或 kendo.init，然后填充它。