korrekte Art und Weise Kendo Widgets innerhalb Vorlage

Im Einfügen eines Widget in Vorlage wie folgt zu initialisieren:korrekte Art und Weise Kendo Widgets innerhalb Vorlage

<script id="example-template" type="text/x-kendo-template">   
    <div data-role="collapsible" data-expand="expandHandler">   
     <h3>#= example #</h3>   
    </div>    
</script>

Aber das Widget wird nicht initialisiert werden, zeigen nur als einfache HTML. Einige Leute schlagen vor, kendo.mobile.init zu verwenden, und es funktioniert, aber sieht wie ein Hack aus. Diese Methode ist nicht dokumentiert.

Meine Frage ist: Was kann ich tun, um Widgets in der Vorlage ordnungsgemäß zu initialisieren?

Komplettes Beispiel:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link href="https://da7xgjtj801h2.cloudfront.net/2015.2.624/styles/kendo.common.min.css" rel="stylesheet" type="text/css" /> 
 
<link href="https://da7xgjtj801h2.cloudfront.net/2015.2.624/styles/kendo.silver.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
<script src="https://da7xgjtj801h2.cloudfront.net/2015.2.624/js/kendo.ui.core.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 

 
    <!-- view --> 
 
    <div id="foo" 
 
     data-role="view" 
 
     data-show="onShow" 
 
     data-model="viewModel"> 
 
    
 
    <div id="bar"> 
 
    </div> 
 
    
 
    </div> 
 
    
 
    <!-- template --> 
 
    <script id="collapsible-template" type="text/x-kendo-template"> 
 
     
 
     <div data-role="collapsible" data-expand="expandHandler"> 
 
      
 
      <h3> 
 
       #= title # 
 
      </h3> 
 
      
 
      <table> 
 
      
 
       <tr> 
 
        <td>Line 1:</td> 
 
        <td>#= line1 #</td> 
 
       </tr> 
 
       <tr> 
 
        <td>Line 2:</td> 
 
        <td>#= line2 #</td> 
 
       </tr> 
 
       
 
      </table> 
 
      
 
     </div> 
 
     
 
    </script> 
 
    
 
    
 
    <script> 
 
    
 
    var app = new kendo.mobile.Application(); 
 
    
 
    var data = [ 
 
       {"title": "title1", "line1": "line 1", "line2": "line 21"}, 
 
       {"title": "title2", "line1": "line 12", "line2": "line 22"} 
 
      ]; 
 
    
 
    function onShow(){   
 

 
     var template = kendo.template($("#collapsible-template").html()); 
 
     $("#bar").html(kendo.render(template, data));   
 
     
 
    } 
 
    
 
    function expandHandler(){ 
 
     console.log("expand"); 
 
    } 
 
    
 
    </script> 
 
    
 
</body> 
 
</html>

Quelle

2016-08-05 Márcio Souza Júnior

-Lesung [docs] (http://docs.telerik.com/kendo-ui/intro/widget-basics/data-attribute-initialization#initialize-in-given-element) wieder bewusst geworden, dass 'Kendo .bind ($ ("# bar"), {}, kendo.mobile.ui) 'ist der richtige Weg. –

nicht sicher, wie Sie, dass mvvm Art und Weise zu tun, gehen Sie mit dieser auf der Javascript Initialisierung statt, wenn es in Ordnung ist

das Beispiel anzeigen :

var app = new kendo.mobile.Application(); 
 
    
 
    var data = [ 
 
       {"title": "title1", "line1": "line 1", "line2": "line 21"}, 
 
       {"title": "title2", "line1": "line 12", "line2": "line 22"} 
 
      ]; 
 
    
 
    function expandHandler(){ 
 
     console.log("expand"); 
 
    } 
 
    
 
    function onShow(){   
 

 
     var template = kendo.template($("#collapsible-template").html()); 
 
     $("#bar").html(kendo.render(template, data));   
 
     
 
     $(".test").kendoMobileCollapsible({ 
 
     \t expand: expandHandler 
 
     }) 
 
    }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Untitled</title> 
 

 
    <link rel="stylesheet" href=""> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css"> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css"> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css"> 
 

 
    <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2016.2.714/js/angular.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script></head> 
 
<body> 
 
    <!-- view --> 
 
    <div id="foo" 
 
     data-role="view" 
 
     data-show="onShow" 
 
     data-model="viewModel"> 
 
    
 
    <div id="bar"> 
 
    </div> 
 
    
 
    </div> 
 
    
 
    <!-- template --> 
 
    <script id="collapsible-template" type="text/x-kendo-template"> 
 
     
 
     <div class="test"> 
 
      
 
      <h3> 
 
       #= title # 
 
      </h3> 
 
      
 
      <table> 
 
      
 
       <tr> 
 
        <td>Line 1:</td> 
 
        <td>#= line1 #</td> 
 
       </tr> 
 
       <tr> 
 
        <td>Line 2:</td> 
 
        <td>#= line2 #</td> 
 
       </tr> 
 
       
 
      </table> 
 
      
 
     </div> 
 
     
 
    </script> 
 
    
 
    
 
</body> 
 
</html>

Quelle

2016-08-05 13:55:49

das funktioniert auch. Ich denke, wenn es eine Möglichkeit gibt, die Vorlage zu rendern, bevor Bindungen auftreten, so würden alle Widgets in der richtigen Weise initialisiert werden. –

korrekte Art und Weise Kendo Widgets innerhalb Vorlage

Antwort

Verwandte Themen