我有一个包含 javascript 的模板
# if(IsSelected) { #
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: age"></td>
</tr>
# } #
它旨在仅显示 IsSelected 值为 true 的记录。虽然它只显示两条记录 - 显示的记录不正确。这是什么原因？
fiddle :http://jsfiddle.net/Lijo/Z86dq/4/
代码
<html>
<head>
<title>Template Filtering</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<script id="row-template" type="text/x-kendo-template">
# if(IsSelected) { #
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: age"></td>
</tr>
# } #
</script>
<!--MVVM Wiring using Kendo Binding-->
<script type="text/javascript">
$(document).ready(function () {
kendo.bind($("body"), viewModel);
});
</script>
<script type="text/javascript">
var viewModel = kendo.observable({
employees: [
{ name: "Lijo", age: "28", IsSelected: true },
{ name: "Binu", age: "33", IsSelected: false },
{ name: "Kiran", age: "29", IsSelected: true }
]
});
</script>
<style>
table, th, td
{
border: 1px solid black;
}
</style>
</head>
<body>
<table id="resultTable">
<tbody data-template="row-template" data-bind="source: employees">
</tbody>
</table>
</body>
</html>
最佳答案
尝试将模板定义为:
<script id="row-template" type="text/x-kendo-template">
# if(IsSelected) { #
<tr>
<td>#= name #</td>
<td>#= age #</td>
</tr>
# } #
</script>
为了避免首先在 tbody 中然后在 td 中进行双重绑定(bind)。
编辑:为了避免引发 KendoUI 的错误问题，我会稍微更改您的代码，而不是使用 kendo.observable 我会使用实现过滤器的DataSource。
因此，您不需要打印或不打印模板中的行，而是在 DataSource 中设置过滤条件。
定义模板如下:
<script id="row-template" type="text/x-kendo-template">
<tr>
<td>#= name #</td>
<td>#= age #</td>
</tr>
</script>
您的 JavaScript 代码为:
var ds = new kendo.data.DataSource({
data : {
employees: [
{ name: "Lijo", age: "28", IsSelected: true },
{ name: "Binu", age: "33", IsSelected: false },
{ name: "Kiran", age: "29", IsSelected: true }
]
},
schema: {
data: "employees"
},
filter: { field: "IsSelected", operator: "eq", value: true }
});
我设置了一个过滤器来过滤掉isSelected不等于true的元素。
然后按如下方式初始化ListView:
$("#list").kendoListView({
dataSource: ds,
template : $("#row-template").html()
});
您可以在此处查看代码:http://jsfiddle.net/OnaBai/Z86dq/16/
关于Kendo 模板内的 Javascript 给出了错误的结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22075654/