Question

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

此listView绑定到具有两个属性的对象列表：＆＃34; Title＆＃34; ＆安培; ＆＃34;＆器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中的属性？

Answer 1

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

<input type="checkbox" #if(IsChecked){# checked="checked" #}# />

以下是工作代码段。

＆＃13;

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;

将输入复选框的属性绑定到字段

1 个答案: