Kendo模板中的Javascript给出了错误的结果 [英] Javascript inside Kendo Template is giving incorrect result
问题描述
我有一个带有javascript的模板
I have a template with javascript inside it
# if(IsSelected) { #
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: age"></td>
</tr>
# } #
旨在仅显示IsSelected值为true的那些记录.尽管仅显示两个记录-显示的记录不正确.是什么原因呢?
It is intended to show only those records for which the IsSelected value is true. Though it shows only two records – the records displayed are not correct. What is the reason for this?
小提琴: 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>
为了避免 double 绑定，首先在tbody中，然后在td中.
in order to avoid a double bind first in the tbody and then in the td.
编辑:为了避免引发KendoUI的错误的问题，我将对代码进行一些更改，而不是使用kendo.observable而是使用实现filter s.
EDIT: In order to avoid the problems with the error that throws KendoUI, I would change your code a little and instead of using a kendo.observable I would use a DataSource that implements filters.
因此，您无需打印模板中的行，而无需在DataSource中设置过滤条件.
So, you don't need to print or not the row in your template but setting the filter condition in the DataSource.
定义模板如下:
<script id="row-template" type="text/x-kendo-template">
<tr>
<td>#= name #</td>
<td>#= age #</td>
</tr>
</script>
，您的JavaScript代码为:
and your JavaScript code as:
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 }
});
我在其中设置了filter的位置，该滤出了isSelected不等于true的元素.
Where I set a filter that filters out elements where isSelected is not equal to true.
然后按如下所示初始化ListView:
Then initialize a ListView as follow:
$("#list").kendoListView({
dataSource: ds,
template : $("#row-template").html()
});
您可以在此处查看代码: http://jsfiddle.net/OnaBai/Z86dq/16/
You can see the code here: http://jsfiddle.net/OnaBai/Z86dq/16/
这篇关于Kendo模板中的Javascript给出了错误的结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
