如何添加/删除类 NativeScript

Question

通过 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;

和我的设置-viewmodel.js

(snippet when dimming)
pgStackLayout.className = "dimPage";

(snippet when back to full opacity)
pgStackLayout.className = "";

我收到一条错误消息，说 pgStackLayout 未定义。

谁能帮我简单地在我的 StackLayout 上添加和删除一个类，这样我就可以在 Ajax 调用正在进行时调暗不透明度？

谢谢你。

Answer 1

在让自己沉浸在 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 开发人员，所以如果这些概念看起来非常基础并且处于初学者水平，我深表歉意。 我只是想与其他新手分享我的学习历程。

直到下一次...

约翰