Question

我在模板中插入一个小部件，如下所示：

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

Answer 1

不确定你是怎么做的mvvm方式，继续在javascript上初始化它，如果可以的话

参见示例：

＆＃13;

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({
        	expand: expandHandler
      })
    }

＆＃13;

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

＆＃13;

正确的方法来初始化模板内的kendo小部件

1 个答案: