KendoMobile ui模板無法渲染CSS如何使模板渲染與kendo stylng在視圖中？

Question

基本上模板不會呈現到一個滾動型使用kendo.render(template, response)但將與content = template(response)工作 - 但這鑑於沒有造型 - 以下

見註釋如何使模板在視圖劍道stylign呈現？

順便說一句，從API調用響應是JSON：

{ 「事項標識」： 「5」， 「圖章」： 「2013年1月24日6點00分00秒」， 「類型」： 「事件類型」 「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內容太多，但它看起來像滾動型控件並沒有這樣做。我認爲它的意圖可能只是顯示靜態內容的頁面，而不是其他小部件。

---

有一個劍道方法未在該文檔中，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 

---

此外，什麼是結束，並開始評論位掛模板的兩端？我不明白爲什麼需要這些。可能會更好地刪除它們。

---

滾動視圖控件應該採取一系列<div>元素作爲它的孩子。當您在控制面上左右滑動時，它會在它們之間翻頁。我沒有看到你在任何地方添加一系列<div>。