Проверка наличия флажка Knockout - PhoneJS

Итак, в моем мобильном веб-приложении (с использованием PhoneJS) я использую dxList для отображения некоторых записей. У меня есть флажок рядом с каждым «элементом» списка, чтобы я мог массово удалять или отправлять записи. Мне нужно знать, как выяснить, установлен ли один или несколько флажков.

Я знаю, что могу сделать это с помощью обычного Knockout, но я не знаю, что инфраструктура PhoneJS на самом деле создает «настоящий» HTML-флажок, а делает кликабельный элемент, который функционирует как флажок.

Поэтому, если один или несколько флажков отмечены, мне нужно показать кнопку отправки и удаления. Мне просто нужно знать, как определить, есть ли какие-либо отмеченные флажки.

Я искал везде в Интернете для этого, но решения для 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>

Я пытался привязать «проверено» к наблюдаемому массиву, но это влияет на все флажки.

Кто-нибудь может мне с этим помочь? Спасибо!


javascript web-applications jquery knockout.js phonejs
person Caleb    schedule 11.10.2013    source источник
comment
Как вы это тестируете? В худшем случае я бы попытался использовать что-то вроде firebug или инструментов разработчика, чтобы щелкнуть правой кнопкой мыши и проверить флажок и посмотреть, какой атрибут сообщает ему, что он выглядит проверенным, а затем сделать вызов jquery, который говорит, что найдите «отмеченные» элементы и сделайте что-то с ними .   -  person segFault    schedule 12.10.2013
comment
@segFault Я бы сделал это, если бы мне нужно, но я хотел бы иметь встроенное решение от PhoneJS, если смогу   -  person Caleb    schedule 14.10.2013

Ответы (2)


arrow_upward
0
arrow_downward

Самый простой подход MVVM заключается в привязке данных dxCheckBox.checked. option для логического свойства модели представления элемента списка. Затем вы можете перебрать элементы и понять, какие из них проверены.

Вы упомянули, что вы

попытался привязать «проверено» к наблюдаемому массиву

Непонятно, зачем привязывать скалярное свойство к массиву.

На самом деле он не сильно отличается от подхода, основанного на чистом HTML. Вы можете обращаться с виджетами PhoneJS так же, как с толстыми HTML-тегами.

person amartynov    schedule 18.10.2013

arrow_upward
0
arrow_downward

Итак, у меня почти тот же вопрос, но я думаю, что могу более четко определить свои требования.

У меня есть dxList, который использует таблицу SQLite в качестве источника данных. Он настроен так, чтобы пользователь мог выбирать из списка шаблонов для применения к другому объекту. Этот новый список шаблонов и связанный с ним идентификатор объекта будут сохранены в ОТЛИЧНОЙ таблице, чем исходные данные, и поэтому мне нужно иметь возможность идентифицировать элементы в списке, которые были проверены.

<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 для добавления/удаления проверенных идентификаторов элементов списка из массива, но я не уверен, насколько хорошо это сработает. Затем идет окончательный анализ, чтобы получить все отмеченные элементы. Я обновлю этот пост, как только он заработает.

Разрешение:

Объекты 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, но он работает так же хорошо, и я думаю, что он более визуально привлекателен, а также информативен для пользователя.

person Zac M.    schedule 20.05.2014