1

我需要准备一个 kendo listView，其中每个项目都是一个输入复选框，如图所示。在此处输入图像描述

此 listView 绑定到具有两个属性的对象列表：“Title”和“IsChecked”

我使用以下模板来准备这个 listView：

    <script type="text/x-kendo-tmpl" id="checkBoxListTemplate">

                <div style='margin-left:5px;'>
                    <label style='font-weight: normal;'>
                        <input type="checkbox" />#: Title#
                    </label>
                </div>
            </script>

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())
            });

从模板中可以看出，“标题”属性绑定显示复选框的内容，但我需要将输入的选中属性绑定到“IsChecked”字段，这样如果它为真，那么复选框应该显示为选中或未选中如果为假取决于财产的价值。

复选框的选中属性如何绑定到“IsChecked”字段？

还有一个问题.. 是否可以有两种方式绑定，如果我手动选中/取消选中复选框，它的值将更改为 dataSource 中的“IsChecked”属性？

4

1 回答 1

1

您可以在剑道模板中使用条件，如下所示：

<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())
  });
<!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>

于 2017-03-28T13:07:03.790 回答