检查是否选中了任何复选框 淘汰赛 - PhoneJS

Question

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

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

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

我已经在网上到处寻找这个，但解决方案是使用 REAL 复选框输入的 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>

我尝试将 'checked' 绑定到可观察数组，但这会影响所有复选框。

谁能帮我解决这个问题？谢谢！

Answer 1

最直接的 MVVM 方法是将 dxCheckBox.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: ?} 值，就像找到的原始海报一样，设置全部或无。我想到了一个数组。我将尝试使用 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>

并循环选择的值以保存到本地数据库：

$.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 或 Checkbox，但它也可以正常工作，而且我认为它在视觉上更吸引人并且信息量更大用户。