0
林將與模板內的部件是這樣的:正確方法來初始化內部模板劍道部件
<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>
再次閱讀[docs](http://docs.telerik.com/kendo-ui/intro/widget-basics/data-attribute-initialization#initialize-in-given-element),意識到'劍道.bind($(「#bar」),{},kendo.mobile.ui)是正確的方法。 –