kendo ui список мобильных телефонов для отображения checkbox

Question

Я хочу показать флажок для всех элементов списка в списке мобильных телефонов kendo, Итак, я привел в моем шаблоне списка кендо, listview отображается правильно, но флажок не отображается. Моего кода выглядит так:

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

<a href="\#next_view" class="km-listview-link" data-role="listview-link"> 
     <input type="checkbox" checked="checked"/> 
     <h3 class="time">#: firstname #</h3> 
     <h3>#: sentdate #</h3> 
</a> 

Answer 1

ответ отредактирован с использованием информации от гена C Как Gene C указал, если завернут внутри появляется тонким флажок.

Если вы конвертируете свой флажок в режим переключения, код будет работать нормально. также не следует добавлять data-role = "listview-link" в ваш шаблон. это будет автоматически добавлено кендо, когда ваш шаблон будет прикреплен к просмотру списка. Когда у вас есть интерактивные виджеты внутри вашего элемента списка, мы не добавляем гиперссылку для обертывания всех элементов. его лучше иметь кнопку для навигации, если вы ожидаете, что пользователи проведут проверку кнопки переключателя, а затем перейдут.

Вот полный рабочий образец в jsbin:

http://jsbin.com/obajih/3/edit

Айв изменил шаблон к этому:

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

     <div> 
     <input type="checkbox" data-role="switch" /> 
    </div> 
     <h3 class="time">#: firstname #</h3> 
     <h3>#: sentdate #</h3> 

    </script> 

    </div> 

Answer 2

Кендо UI поддерживает связывание и стилизации входа CheckBox:

<script id="script-id" type="text/x-kendo-template"> 
    <label> 
     <input type="checkbox" checked="checked"/> 
     <h3 class="time">#: firstname #</h3> 
     <h3>#: sentdate #</h3> 
    </label> 
</script> 

Я не могу пообещать вам, что список ite m будет вести себя или показывать, как вы ожидаете, если вы также включите <a>. Вам может потребоваться привязка к обработчику событий щелчка на <ul>:

<ul data-role="list-view" data-bind="click: navigateToNextView"/>