2

基本上，模板不会使用 ScrollView 渲染，kendo.render(template, response)但可以使用content = template(response)- 但是这在视图中没有样式 - 请参阅下面的评论

如何在视图中使用 kendo stylign 渲染模板？

来自 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>
4

1 回答 1

3

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

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

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

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

它将返回与template(response). 它只是提供了一种将相同模板一次应用于许多项目的方法。

通常，当您创建一个小部件时，在您调用的情况下，.kendoMobileScrollView()您希望它也将该元素的任何 HTML 内容转换为小部件，但看起来 ScrollView 小部件并没有这样做。我认为它的意图可能是只显示静态内容页面，而不是其他小部件。

文档中没有列出一个 Kendo 方法，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

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

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

于 2013-01-16T12:47:18.223 回答