Пользовательский интерфейс Nativescript не обновляется при программном добавлении или удалении классов css

Question

У меня проблемы с обновлением пользовательского интерфейса при добавлении или удалении классов для элементов на странице. Я пытаюсь создать альтернативу плагину nativescript-dom, который сейчас не работает на ns6.

main-page.ts

import { TOGGLECLASS, checkChildren } from "./common";

//hide / unhide extraneous fields
export function toggleHidden() {    
    checkChildren(TOGGLECLASS, page, "toHide", "hidden");
}

main-page. xml

<ActionItem id="settbtnfrm" tap="toggleHidden" icon="~/images/sett.png" visibility="visible"></ActionItem> <!-- Settings -->

common.ts

import { View } from "tns-core-modules/ui/page";

export const TOGGLECLASS = 1, ADDCLASS = 2, DELETECLASS = 3;

export function checkChildren(method: number, vi:View, getterClasName:string, clasName:string) {
    vi.eachChildView((vii) => {
        if(vii.cssClasses.has(getterClasName)) {

            if(method == TOGGLECLASS) {
                if(vii.cssClasses.has(clasName)) {
                    vii.cssClasses.delete(clasName);
                } else {
                    vii.cssClasses.add(clasName);
                }
            } else if(method == ADDCLASS) {
                if(vii.cssClasses.has(clasName)) {
                } else {
                    vii.cssClasses.add(clasName);
                }
            } else if(method == DELETECLASS) {
                if(vii.cssClasses.has(clasName)) {
                    vii.cssClasses.delete(clasName);
                }
            }

        }
        checkChildren(method, vii, getterClasName, clasName);
        return true;
    });
}

Этот код удаляет или добавляет классы. Я могу проверить это по console.log (vii.cssClasses.has (clasName)); Это возвращает правильный true false на консоли, но не обновляет фактический интерфейс пользователя. Элементы с css классом toHide должны быть скрытыми и невидимыми.

Пример элемента, который можно скрыть на главной странице. xml

<GridLayout columns="*, 100, auto, auto" rows="*" class="toHide hidden">
            <Label col="0" class="lbl lft" text="Jumbo Rate" textWrap="true" />
            <TextField col="1" hint="Jumbo" text="{{ rateJumbo }}" keyboardType="number" editable="true" />
            <Button col="2" text="-" objtoset="rateJumbo" class="btn btn-outline btn-rounded-sm mnb1" tap="reduceVal" changeVal="1" />
            <Button col="3" text="+" objtoset="rateJumbo" class="btn btn-outline btn-rounded-sm mnb2" tap="increaseVal" changeVal="1" />

        </GridLayout>

Пожалуйста, помогите, я не так хорош в NativeScript, но очень нравится этот фреймворк.

Спасибо

Answer 1

Вы не должны использовать свойство cssClasses, самый простой способ сделать это - передать все имена классов, разделенные пробелом, свойству className.

Внутренне каркас прослушивает изменения className, проанализируйте и сохраните их в cssClasses и установите обновление пользовательского интерфейса.

Но если вы считаете, что играть с className сложно, вы бы предпочли использовать cssClasses, тогда вам следует вызвать закрытый метод ._onCssStateChange() в экземпляре представления для обновления пользовательского интерфейса.

Answer 2

Типичный способ управления видимостью - использовать атрибут видимости с условным оператором, а затем установить связанную переменную привязки, например,

в xml:

<Label class="label" text="Label Text"  visibility="{{ showLabel ? 'visible' : 'collapsed' }}" />

in js:

viewModel.set("showLabel", "true"); 

Если вы действительно хотите контролировать класс, то вы можете сделать что-то вроде

<Label class="{{ showLabel ? 'labelShow' : 'labelHide' }}" text="Label Text"  />

Это может быть несколько проще, чем подход беру сейчас.