以编程方式添加或删除 css 类时不更新本机脚本 UI

Question

在页面上的元素中添加或删除类时，我在更新UI时遇到问题。 我正在尝试替代现在无法在 ns6 上运行的 nativescript-dom 插件。

主页.ts

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

主页.xml

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

常见.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，但不会更新实际 UI。 带有 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

控制可见性的典型方法是将可见性属性与条件语句一起使用，然后设置关联的绑定变量，例如，

在 XML 中：

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

在 js 中：

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

如果你真的想控制类，那么你可以做这样的事情，

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

这可能比您现在采用的方法简单一些。

Answer 2

您不应该使用cssClasses属性，最简单的方法是将所有用空格分隔的类名传递到className属性。

在内部，框架侦听className上的更改，解析它并将它们存储在cssClasses集合中并触发UI更新。

但是，如果您认为使用className很难，则宁愿使用cssClasses那么您应该在视图实例上调用私有方法._onCssStateChange()来更新 UI。