Question

我有一个代码块，它应该循环遍历一个可观察的数组，并生成一系列分组的复选框（如this example中所示）。

这就是我得到的东西。 http://dl.dropbox.com/u/495070/shared/2012-03-28_09.03.33.000.png

这是展示问题的jsFiddle。

这是生成它的代码片段（不像小提琴那么有用）。

            <fieldset id="myList" data-role="controlgroup"  data-bind='foreach : acRoleOps()'>
                <legend>
                </legend>
                <br><br><br><h4><span data-bind="text: $root.opNameGet(OperationID)"></span></h4>

                <input data-theme="c" type="checkbox" data-role="controlgroup" data-bind="attr: { 'data-id': 'checkbox-bcreate-' + ID, name: 'checkbox-bcreate-' + ID, id: 'checkbox-bcreate-' + ID }, checked: BCreate, click: $parent.opPrivsToggle" />
                <label data-theme="c" data-bind="attr: { for: 'checkbox-bcreate-' + ID }">Create</label>

                <input data-theme="c" type="checkbox" data-role="controlgroup" data-bind="attr: { 'data-id': 'checkbox-bread-' + ID, name: 'checkbox-bread-' + ID, id: 'checkbox-bread-' + ID }, checked: BRead, click: $parent.opPrivsToggle" />
                <label data-theme="c" data-bind="attr: { for: 'checkbox-bread-' + ID }">Read</label>

                <input data-theme="c" type="checkbox" data-role="controlgroup" data-bind="attr: { 'data-id': 'checkbox-bedit-' + ID, name: 'checkbox-bedit-' + ID, id: 'checkbox-bedit-' + ID }, checked: BEdit, click: $parent.opPrivsToggle" />
                <label data-theme="c" data-bind="attr: { for: 'checkbox-bedit-' + ID }">Edit</label>

                <input data-theme="c" type="checkbox" data-role="controlgroup" data-bind="attr: { 'data-id': 'checkbox-bdelete-' + ID, name: 'checkbox-bdelete-' + ID, id: 'checkbox-bdelete-' + ID }, checked: BDelete, click: $parent.opPrivsToggle" />
                <label data-theme="c" data-bind="attr: { for: 'checkbox-bdelete-' + ID }">Delete</label>

            </fieldset>

有没有人见过这个？如果是这样，你能指出我哪里出错吗？

谢谢！

Answer 1

你需要使用淘汰赛 http://knockoutjs.com/documentation/foreach-binding.html

http://jsfiddle.net/vNcNC/38/

Answer 2

document.ready（）无法在jQuery mobile上运行，因为页面是动态加载的。相反，请使用pageInit事件。看到这里：http://jsfiddle.net/vNcNC/17/现在你还有一些关于Knockout的问题，但是我对它不太熟悉，所以我无法帮助你。

Answer 3

我认为这是KO生成标记的时间与jquery mobile应用其自定义皮肤的时间之间的冲突。我发现你的代码存在一个问题。我认为foreach是错误的元素。我将你的fieldset包装在一个新的div中并将foreach应用到那个。

<div data-bind='foreach : acRoleOps()'>
                <fieldset id="opsList" data-role="controlgroup">

我对jquery mobile并不太熟悉，但这就是我如何证明这种情况。我删除了引用，只是检查了KO生成了正确的标记。通过上述更改，它似乎就是这样做的。

http://jsfiddle.net/madcapnmckay/THG9F/

以下是仅粘贴jquery mobile的版本，其中粘贴了生成的标记。

http://jsfiddle.net/madcapnmckay/tuWgM/1/

正如您所看到的，KO正在生成正确的标记，只会出现时间冲突。

希望这有帮助。

knockout + jqm奇怪的复选框问题

3 个答案: