检查是否选中了任何复选框- Knockout - PhoneJS

Question

因此，在我的移动web应用程序(使用PhoneJS)中，我使用dxList来显示一些记录。我在每个列表“项目”旁边都有一个复选框，这样我就可以批量删除或发送记录。我需要知道如何确定是否选中了一个或多个复选框。

我知道我可以用普通的Knockout来做到这一点，但我不知道PhoneJS框架实际上并没有创建一个“真正的”HTML，而是创建了一个功能类似于checkbox的可点击元素。

因此，如果选中了一个或多个复选框，我需要显示一个发送和删除按钮。我只需要知道如何确定是否有任何复选框。

我已经在网上到处寻找这个，但解决方案是使用真正的复选框输入的Knockout…

下面是我的dxList代码：

<div data-bind="dxList:{dataSource: list_data, grouped:true }">
    <div data-options="dxTemplate:{name:'group'}">
        <b><span data-bind="text: $data.key"></span></b>
    </div>  
    <div data-options="dxTemplate:{name:'item'}">
        <span data-bind="text: $data.item_value"></span>
        <div data-bind="dxCheckBox: { }" style="float:right"></div>
    </div>   
</div>

我曾尝试将“选中”绑定到一个可观察的数组，但这会影响所有的复选框。

有人能帮我吗？谢谢!

Answer 1

最直接的方法是将dxCheckBox.checked选项数据绑定到列表项视图模型的布尔属性。然后，您可以遍历这些项，并了解哪些项被选中。

你提到过你

尝试将“checked”绑定到可观察的数组

尚不清楚为什么要将标量属性绑定到数组。

实际上，它与纯HTML方法没有太大区别。您可以将PhoneJS小部件视为胖的HTML标记。

Answer 2

因此，我有几乎相同的问题，但我认为我可以更清楚地说明我的要求。

我有一个使用SQLite表作为数据源的dxList。它被设置为允许用户从模板列表中进行选择以应用于另一个对象。这个新的模板列表和关联的对象ID将保存在与原始数据不同的表中，因此，我需要能够识别列表中已检查的项目。

<div data-bind="dxList: { dataSource: templateList }">
        <div data-bind="dxAction: ''" data-options="dxTemplate : { name: 'item' } ">
            <table>
                <tr>                      
                    <td>
                        <div data-bind="dxCheckBox: {  }"></div>
                    </td>
                    <td>
                        <div style="font-weight: bold; padding-left: 10px;" data-bind="text: TemplateName"></div>
                    </td>                   
                </tr>
            </table>
        </div>
    </div>

我在第一次搜索的时候发现了这篇文章。我不能使用每个复选框的data-bind：{checked：?}值，因为这会像原来的poster找到的那样，设置all或none。我想的是一个数组。我将尝试使用dxAction在数组中添加/删除选中的列表项ID，但我不确定这样做效果如何。然后是最后的解析，以获得所有选中的项。我会更新这篇文章，一旦我让它工作。

解决方案：

ViewModel对象：

selectedTemplates: ko.observableArray(),
selectTemplate: function (args) {
        //If it's there. Remove it.
        if (args.model.selectedTemplates.indexOf(args.itemData.TemplateID) > -1) {
            args.model.selectedTemplates.pop(args.itemData.TemplateID);
            args.itemElement[0].style.backgroundColor = '';
            args.itemElement[0].style.color = 'Black';

        }
            //else Add
        else {
            args.model.selectedTemplates.push(args.itemData.TemplateID);
            args.itemElement[0].style.backgroundColor = '#017AFF';
            args.itemElement[0].style.color = 'White';
        }

    },

和视图：

<div data-options="dxView : { name: 'SelectSurveys', title: 'SelectSurveys' } ">
    <div data-bind="dxCommand: { title: 'Save', id: 'create', action: saveSelections, icon: 'save' }"></div>
    <div data-options="dxContent : { targetPlaceholder: 'content' } ">
        <div data-bind="dxList: { dataSource: templateList, itemClickAction: selectTemplate }">
            <div data-options="dxTemplate : { name: 'item' } ">
                <div style="font-weight: bold; padding-left: 10px;" data-bind="text: SurveyName"></div>
            </div>
        </div>
    </div>
</div>

并循环选定的值以保存到本地DB：

$.each(args.model.selectedTemplates(), function (index, value) {
    db.transaction(function (tx) {
        console.log("Inserting Data");
        tx.executeSql(sql, [value],
            function (t, result1) {
                if (result1 != null) {
                    console.log("New Item added." + result1.insertId);
                }
            },
            function (t, error) {
                console.log(error);
            });
    });

在对象中，我添加了一些颜色，这样你就可以知道哪些被选中了，它不使用dxSwitch或复选框，但它工作得一样好，我认为它在视觉上更吸引人，对用户也更有意义。