Question

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

如何在视图中使用剑道样式进行模板渲染？

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

{“event_id”：“5”，“stamp”：“2013-01-24 06:00:00”，“type”：“Event Type”，“loc”：“Location”，“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>

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);中未列出的Kendo方法将模板字符串转换为小部件。当我在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>。

Kendo Mobile ui模板无法渲染css如何在视图中使用kendo样式制作模板渲染？

1 个答案: