我需要准备一个kendo listView,其中每个项目都是一个输入复选框,如图所示。
此listView绑定到具有两个属性的对象列表:" Title" &安培; "&器isChecked#34;
我使用以下模板准备此listView:
<!DOCTYPE html>
<html>
<head>
<script src="jstest.js"></script>
</head>
<body id="thebody">
<button id="1" onclick="returneD(this.id)">O N E</button>
<button id="2" onclick="returneD(this.id)">T W O</button>
<button id="3" onclick="returneD(this.id)">T H R E E</button>
<button id="4" onclick="returneD(this.id)">F O U R</button>
<br>
<button onclick="refresh1()">refresh</button>
</body>
</html>
从模板中可以看出,&#34;标题&#34;属性必然会显示复选框的内容,但我需要将输入的checked属性绑定到&#34; IsChecked&#34;如果为true,则复选框应显示为选中或取消选中(如果为false),具体取决于属性的值。
如何将复选框的已检查属性绑定到&#34; IsChecked&#34;场?
还有一个问题..是否可以进行双向绑定,如果我手动选中/取消选中该复选框,其值将会更改为&#34; IsChecked&#34; dataSource中的属性?
答案 0 :(得分:1)
您可以在kendo模板中使用条件,如下所示:
<input type="checkbox" #if(IsChecked){# checked="checked" #}# />
以下是工作代码段。
var _data = [];
_data.push({
"Title": "123",
"IsChecked": true
});
_data.push({
"Title": "ABCD",
"IsChecked": false
});
var _dataSource = new kendo.data.DataSource({
data: _data
});
$("#lstView").kendoListView({
dataSource: _dataSource,
template: kendo.template($("#checkBoxListTemplate").html())
});
&#13;
<!DOCTYPE html>
<html>
<head>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
</head>
<body>
<div id="lstView">
<script type="text/x-kendo-tmpl" id="checkBoxListTemplate">
<div style='margin-left:5px;'>
<label style='font-weight: normal;'>
<input type="checkbox" #if(IsChecked){# checked="checked" #}# />#: Title#
</label>
</div>
</script>
</div>
</body>
</html>
&#13;