Question

我正在尝试使用ko observableArray构建一个jQuery移动列表视图，并发现放置在重复区域内的一些表单控制器没有响应用户输入。例如，在下面的代码片段中，jqm将呈现一个翻转开关列表，但它们不会翻转!!

<ul  data-bind="foreach: [1, 2, 3, 4]" data-role="listview"> 
    <li>
        <select class="flip-a" data-role="slider">
            <option value="on">Yes!!</option>
            <option value="off">No</option>
        </select>        
    </li>
<ul>

我用一个简单的数组替换了实际的ko observableArray，以保持代码片段的小。我尝试了相同的容器少绑定，发现结果与上面的例子相同。

非常感谢有人能指出我做错了什么

jsf：http://jsfiddle.net/Chintana/6YRtr/

提前谢谢

Chintana

Answer 1

查看flip toggle switch documentation，它声明：

设置标签的for属性以匹配输入的id，以便它们在语义上相关联。如果在页面布局中不需要，可以访问隐藏标签，但出于语义和可访问性的原因，我们要求它出现在标记中。

你需要创建一个唯一的ID ...注意带有撇号的'for'是故意的 - 使它适用于较旧的IE版本。

<ul data-bind="foreach: [1, 2, 3, 4]" data-role="listview"> 
    <li>
        <label class="ui-hidden-accessible" data-bind="attr: { 'for': 'flip' + $data }"></label>
        <select class="flip-a" data-role="slider" data-bind="attr: { id: 'flip' + $data }">
            <option value="on">Yes!!</option>
            <option value="off">No</option>
        </select>        
    </li>
<ul>

Answer 2

在这种情况下，淘汰赛和jqueryui手机之间似乎存在冲突。我认为这与事物的创造顺序有关。即第一个jqueryui移动看到模板并创建按钮，然后淘汰复制代码四次...我认为这使得它有点欠定...这是修复它的示例代码：

<ul id="list" data-bind="foreach: [1, 2, 3, 4]" data-role="listview">
    <li>
        <select class="flip-a" data-bind="attr: { 'data-role': 'slider' }" data-role='nojs'>
            <option value="on">Yes!!</option>
            <option value="off">No</option>
        </select>        
    </li>
<ul>

和js ......

ko.applyBindings();
$('#list').trigger('create');

在这种情况下，jqueryui mobile的第一遍忽略模板（nojs选项）。然后发生敲除绑定，这将创建四个项目，然后我们通过调用trigger（'create'）命令强制刷新列表。因为实际项目是绑定的，所以它们的数据角色将是“滑块”并且它们被正确转换。

在这里小提琴：http://jsfiddle.net/dWCDw/

奇怪的jquery移动列表视图行为与淘汰foreach一起使用

2 个答案: