kendo-ui - Kendo Mobile ui 模板未呈现 css 如何使模板呈现剑道样式？

Question

基本上模板不会使用 kendo.render(template, response) 渲染到 ScrollView但将与 content = template(response) 一起使用- 但是这没有样式 - 请参阅下面的评论

如何使用剑道风格渲染模板？

来自 api 调用的 BTW 响应是 JSON:

{"event_id":"5","stamp":"2013-01-24 06:00:00","type":"事件类型","loc":"位置","状态":"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>

Answer 1

小部件类(如 km-button )在小部件初始化之前不会添加。
template()和 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>任何地方。