Question

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

我知道我可以使用普通的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选项数据绑定到列表项视图模型的布尔属性。然后，您可以遍历项目并了解检查的项目。

你提到你

尝试将'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>

循环选定的值以保存到本地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或Checkbox，但它也可以正常工作，我认为它是更具视觉吸引力，并为用户提供信息。

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

2 个答案: