KendoMobile ui 模板不渲染 css 如何使模板在视图中使用 kendo stylng 进行渲染？

基本上模板不会使用以下方式渲染到 ScrollViewkendo.render(template, response)但会与content = template(response)- 但这没有视图中的样式 - 请参阅下面的评论

如何使模板在视图中呈现剑道风格？

顺便说一句，来自 api 调用的响应是 JSON：

{"event_id":"5","stamp":"2013-01-24 06:00:00","type":"事件类型","loc":"位置","status":"1" }

<!-- eventDetail view -------------------------------------------------------------------------------------------------->
    <div data-role="view" id="view-eventDetail" data-show="getEventDetailData" data-title="eventDetail">
        <header data-role="header">
            <div data-role="navbar">
                <span data-role="view-title"></span>
                <a data-align="right" data-role="button" class="nav-button" href="#view-myEvents">Back</a>
            </div>
        </header>
        <div id="eventDetail" data-role="page"></div>
    </div>

    <script id="eventDetail-template" type="text/x-kendo-template">
        --><form id="addEventForm"><p>
        <input name="event_type" id="event_type" data-min="true" type="text" value="#= type #" />
        </p>
        <p>         
        <input name="event_loc" id="event_loc" data-min="true" type="text" value="#= loc #" />
        </p>
        <p>         
        <input name="event_date_time" id="event_date_time" data-min="true" type="datetime" value="#= stamp#" />
        </p>
        <p>
        Share this
        <input data-role="switch" id="event_share" data-min="true" checked="checked" value="1"/></p>
        <p>
        <input type="button" id="eventCancelButton" style="width:30%" data-role="button" data-min="true" value="Cancel" />
        <input type="submit" id="eventDoneButton" style="width:30%" data-role="button"  data-min="true" value="Done" />
        </p></form><!--
    </script>

    <script>

        //eventDetail engine
        function getEventDetailData(e) {
            $.ajax({
                url: 'http://localhost/mpt/website/api/event_details.php?',
                type: "GET",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: { userID: 2, eventID: e.view.params.id },


                success: function(response) {

                    console.log(response);

                    var template = kendo.template($("#eventDetail-template").html()),
                    content = template(response);//works but no kendo css
                    //content = kendo.render(template, response);not working

                    $("#eventDetail")
                    .kendoMobileScrollView()
                    .data("kendoMobileScrollView")
                    .content("<!--" + content + "-->");
                }
            });
        }</script>

小部件类（例如km-button) 在小部件初始化之前不会添加。

The template() and render()函数只是将模板作为字符串返回，并替换数据（将 #=foo# 替换为 foo 属性的值），但不会初始化所有小部件。事实上，如果它想单独返回一个文本字符串，而不是 DOM 元素，它就不会初始化小部件。小部件的初始化通常由使用模板的父小部件完成。

render()在您的情况下不起作用，因为它的第二个参数应该是一个数组。它所做的只是对数组中的每个项目调用一次给定的模板函数并连接结果。如果你这样做：

var content = kendo.render(template, [response]); // wrap response in an array

它将返回相同的文本字符串template(response)。它只是提供了一种将相同模板同时应用于多个项目的方法。

通常，当您创建小部件时，在您的情况下调用.kendoMobileScrollView()您可能希望它也将该元素的任何 HTML 内容转换为小部件，但看起来 ScrollView 小部件不会执行此操作。我认为它的目的可能只是显示静态内容页面，而不是其他小部件。

有一种剑道方法未在文档中列出，kendo.mobile.init(contents);您可以使用它将模板字符串转换为小部件。当我在 jsFiddle 中尝试它时，它给我带来了一些错误，但你可以尝试类似的方法：

var content = template(response); // apply response to template
var contentElements = $(content); // turn the string into DOM elements
kendo.mobile.init(contentElements); // turn elements into widgets (this throws error for me)
$("#eventDetail").html(contentElements); // add contents to the desired element
$("#eventDetail").kendoMobileScrollView(); // create the scroll view

另外，模板末端的结束和开始注释位是什么？我不明白为什么需要这些。删除它们可能会更好。

ScrollView 小部件应该采取一系列<div>元素作为其子元素。然后，当您向左/向右滑动控件时，它会在它们之间翻页。我没有看到你添加一系列<div>任何地方。