Привязать свойство флажка ввода, отмеченное для поля

Question

Привязать свойство флажка ввода, отмеченное для поля

Мне нужно подготовить кендо 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", чтобы при его значении флажок отображался как проверенный или непроверенный, если ложь в зависимости от стоимости имущества.

Как свойство checkbox может быть привязано к полю "IsChecked"?

Еще один вопрос. Возможно ли иметь двухстороннее связывание, чтобы, если я вручную установлю / сниму флажок, его значение будет изменено для свойства "IsChecked" в dataSource?

1

javascript html kendo-listview

Источник

user2091061 28 мар '17 в 12:32

1 ответ

Другие вопросы по тегам javascript html kendo-listview

user88907 28 мар '17 в 13:07 2017-03-28 13:07 · Answer 1 · 2017-03-28 13:07

Вы можете использовать условия внутри шаблона кендо, например:

<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>