Question

我想在kendo移动列表视图中显示所有列表项的复选框，所以，我已经在我的kendo listview模板中给出了 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

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>上的click事件处理程序：

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

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

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

2 个答案: