正确方法来初始化内部模板剑道部件

林将与模板内的部件是这样的：正确方法来初始化内部模板剑道部件

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

但小部件不初始化，只是显示为纯HTML。有人建议使用kendo.mobile.init，它可以工作，但看起来像一个黑客。这种方法至少没有记录。

我的问题是：我能做些什么来正确地初始化模板内部的小部件？

完整的示例：

<!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>

来源

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

再次阅读[docs]（http://docs.telerik.com/kendo-ui/intro/widget-basics/data-attribute-initialization#initialize-in-given-element），意识到'剑道.bind（$（“＃bar”），{}，kendo.mobile.ui）是正确的方法。 –

不知道怎么搞的MVVM方式，用这种初始化它的JavaScript下去，而不是它是否是好的

参见示例：

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>

来源

2016-08-05 13:55:49

这也适用。我想在绑定之前是否有办法呈现模板，所以所有的小部件都会以适当的方式被初始化。 –

正确方法来初始化内部模板剑道部件

回答

相关问题