0

我试图使用 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/

先感谢您

钦塔纳

4

2 回答 2

0

查看翻转切换开关文档，它指出：

设置标签的 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>
于 2013-01-26T15:11:39.647 回答
0

在这种情况下，淘汰赛和 jqueryui mobile 之间似乎存在冲突。我认为这与事物的创建顺序有关。即首先 jqueryui mobile 看到模板并创建按钮，然后敲除复制代码四次......我认为这使得它有点欠精细......这是修复它的示例代码：

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

于 2013-01-29T00:23:57.323 回答