用于显示复选框的 kendo ui 移动列表视图答案

【问题标题】：kendo ui mobile listview for displaying checkbox用于显示复选框的 kendo ui 移动列表视图
【发布时间】：2013-05-20 14:17:55
【问题描述】：

我想为 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>

【问题讨论】：

标签： kendo-ui kendo-mobile

【解决方案1】：

Kendo UI 确实支持复选框输入的绑定和样式化：

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

如果您还包含<a>，我不能向您保证列表项的行为或显示方式将符合您的预期。您可能需要绑定到<ul> 上的点击事件处理程序：

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

【讨论】：

您是否尝试在上述模板中添加一个复选框并运行它？复选框不可见。不确定它是否是当前版本中的错误。
我试过了，当<a> 也在模板中时复选框没有出现。这就是为什么我建议删除<a>（如果可能）并在list-view 上使用click 事件处理程序。不理想，但我想我会给提问者一些选择。话虽如此，我发现自己不再使用输入复选框和 <a> 在列表视图模板中导航，因为它们似乎不适用于 iOS 设备触摸事件。
对我来说，即使删除了锚标签，复选框也不会出现。请检查这个 jsbin：jsbin.com/obajih/9。
你在哪里测试示例代码？我仍然无法在 Windows 7 机器上看到 chrome 和 safari 中的复选框

【解决方案2】：

使用来自 Gene C 的输入编辑答案 正如 Gene C 指出的那样，如果包裹在复选框中看起来很好。

如果您将复选框转换为切换视图，则代码可以正常工作。您也不应该在模板中添加 data-role="listview-link" 。当您的模板附加到列表视图时，这将由 kendo 自动添加。当我们在您的列表项中有可点击的小部件时，我们不会添加超链接来包装所有项目。如果您希望用户检查切换按钮然后导航，最好有一个按钮来进行导航。

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

【讨论】：

嗨！在列表视图上使用过滤器时如何保持选中状态？