javascript - 如何添加/删除类 NativeScript
问题描述
通过 Ajax 调用我的 API 时,我试图调暗 StackLayout 的不透明度。
我的页面很简单:
<Page loaded="pageLoaded" class="page"
xmlns="http://www.nativescript.org/tns.xsd">
<ActionBar title="Settings" class="action-bar">
</ActionBar>
<ScrollView>
<StackLayout id="layout" >
<Image src="~/images/header-logo.jpg" stretch="fit" />
<GridLayout rows="auto, auto">
<Label
text="Hey Welcome! You need to come up with a username. You only have to do this once." row="0" textWrap="true" class="labelMessage" />
<TextField id="username" text="{{ username }}"
hint="Any username you want"
returnPress="doneTap" autocorrect="false"
autocapitalizationType="none" row="1" />
<ActivityIndicator busy="{{ authenticating }}" />
</GridLayout>
<Button text="Save Username" id="registerButton"
tap="{{ register }}" returnKeyType="done" class="button" />
</StackLayout>
</ScrollView>
</Page>
这是我的视图模型的片段......
register: function () {
if (this.username == null || this.username.length < 4) {
alert("Come on, enter a username with at least 4 letters!");
return;
}
this.authenticating = true;
我有这个 CSS 来修改不透明度:
.dimPage {
opacity: 0.3;
}
** 我的失败尝试** 现在,我需要弄清楚如何在我的 JavaScript 中添加和删除该类。我尝试了以下方法:
设置-page.js
var frameModule = require("tns-core-modules/ui/frame");
var SettingsViewModel = require("./settings-view-model");
var settingsViewModel = new SettingsViewModel();
var pgStackLayout;
var txtUsername;
function pageLoaded(args) {
var page = args.object;
var pgStackLayout = null;
pgStackLayout = page.getViewById("layout");
page.bindingContext = settingsViewModel;
}
exports.pageLoaded = pageLoaded;
和我的 settings-viewmodel.js
(snippet when dimming)
pgStackLayout.className = "dimPage";
(snippet when back to full opacity)
pgStackLayout.className = "";
我收到一条错误消息,说 pgStackLayout 未定义。
任何人都可以帮助我在 StackLayout 上简单地添加和删除一个类,以便在 Ajax 调用正在进行时使不透明度变暗吗?
谢谢你。
解决方案
在沉浸在 DOCS 中并在 PlayGround 中练习之后... 已解决
我采取了稍微不同的方法来实现我想要的结果。显然,以下方法很常见 - 因为我在研究这个问题时反复注意到这种模式。
因此,对于希望在核心 NativeScript 应用程序中操作类的未来读者来说,这对我有用。
重申我最初的问题 我需要在特定时间向页面上的特定元素添加(和删除)一个类。这需要在我的 JavaScript(或视图模型)中完成。
具体来说,我想在单击特定元素时使特定 StackLayout 的不透明度变暗。
我的解决方案 我确信有一百种方法可以做到这一点,但作为一个初学者 NS 开发人员,我发现了这个简单的方法:
// [ ... snippet from within my view model code ]
//
// Process The Tap Event
topTap: function (args) {
const tLabel = args.object; // get a reference to the Label tapped
elStack = tLabel.parent; // find the parent element of Label, which is the
// StackLayout we need.
elStack.className = "dimPage"; // simply add an existing CSS class
},
为了恢复元素的不透明度,我简单地使用了一个空白字符串:
elStack.className = ""; // remove the above added class name
ID 方法 - 作为替代方法 一旦我弄清楚如何获取父元素的句柄,我就能够使用其 ID 找到任何元素:
... [ modifying the snippet above slightly ]
// Let's assume our StackLayout looks something like this in our XML...
<StackLayout id="MyStackLayout" height="100%" row="1">
// To find el's by ID, we need to include the view module first
const view = require("tns-core-modules/ui/core/view");
topTap: function (args) {
const tLabel = args.object; // handle to tapped element
parent = tLabel.parent; // get reference to parent again
if(parent) { // make sure we got parent
let myStack = view.getViewById(parent, "MyStackLayout"); // get view
myStack.className = "dimPage"; // add class
}
},
在页面级别动态添加 CSS 我还发现我可以通过简单地传递一个字符串在页面级别添加 CSS 规则:
// This would immediately dim the StackLayout(s) opacity
page.addCss("StackLayout {opacity: 0.3}");
// ...to restore
page.addCss("StackLayout {opacity: 1.0}");
结束思考... 我很快了解到在 NativeScript 中,我需要学习获取视图句柄的基本概念(在代码中引用它)。
一旦你这样做了,操作页面上的元素就非常简单了。
我注意到获取页面句柄的一种常见方法是在页面加载时将其分配给全局变量:
var _page; // Our "Global" page variable available to the entire script
function pageLoaded(args) {
_page = args.object;
}
好吧,这涵盖了所有需要了解的关于我的页面中的动态类的信息。请记住,这篇文章中的内容来自一个非常新的 NativeScript 开发人员,所以如果这些概念看起来非常基础并且处于初学者水平,我深表歉意。我只是想我会与其他新手分享我的学习之旅。
直到下一次...
约翰
推荐阅读
- javascript - 使用“导出默认值”导出所有功能
- r - 根据与原始因子的“子因子”的特定水平相对应的值对 R 中的因子重新排序
- google-analytics - 为 Google Analytics 设置 user_id
- java - 在云中读取 Azure Blob (PDF) 的最实用方法是什么?
- sql - 在具有附加条件的树中查找实体的后代(PostgreSQL)
- git - 我分支的代码没有合并回主分支,为什么不呢?
- python-3.x - 如何通过 celery 配置为 RabbitMQ 中的队列分配优先级?
- java - 数字平方和
- javascript - 我用 create-react-app 创建了一个项目。在我的 Windows pc 上,但是当尝试在命令行上运行 npm start 时,它显示此错误。请帮助我
- regex - 某些特殊字符仅在它们前面有转义字符时才允许使用