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

时间:2017-03-28 12:32:59

标签: javascript html kendo-listview

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

此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中的属性?

1 个答案:

答案 0 :(得分:1)

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

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

以下是工作代码段。

&#13;
&#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;
&#13;
&#13;