在另一个页面视图上获取框架的元素

Question

我有一些指向仪表板/仪表板/仪表板的框架：

<Page class="page" xmlns="http://www.nativescript.org/tns.xsd" loaded="load">
<GridLayout rows="*,60">
    <Frame defaultPage="dashboard/dashboard/dashboard/" id="dashboard"></Frame>
    <GridLayout row="1">
        <StackLayout verticalAlignment="bottom" row="2" class="bottom-nav">
            <GridLayout rows="*" columns="*" height="70">

                <Label class="icon4 foot-icon" row="0" col="0" id="ico4"></Label>
            </GridLayout>
        </StackLayout>
    </GridLayout>
</GridLayout>
</Page>

现在，在这种情况下，我想使用dashboard.js定位此Frame的元素（ico4）。我想要的就是选择它并为此添加CSS类。 但是对我来说没有任何用。我已经尝试过了，但是没有成功：

dashboard.js：

var frame = require('ui/frame');
var topmost = frame.getFrameById('dashboard').getElementById('ico4');
var ic = topmost;
console.log(ic);

我的问题是-是否可以以任何方式定位此ico4？ 谢谢。

编辑： 我已经尝试过@Nick Iliev的路径，但对我来说ico是不确定的...

    var frame = require('ui/frame');
    var myFrame = frame.getFrameById("dashboard");

    // Its working the output :Frame<dashboard>@file:///app/dashboard/root.xml:3:5;
    console.log(myFrame);

    var myPage = myFrame.currentPage;
    // It's working too
    console.log(myPage);

    var ico = myPage.getViewById("ico4");

    // Not working - Undefined...

console.log（ico）;

编辑：我添加了一个简单的游乐场来显示我的问题：https://play.nativescript.org/?template=play-js&id=uVY4Ir

//app-root.xml (frame has ID)

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="load">
<GridLayout rows="*,60">
    <Frame defaultPage="home/home-page" id="dashboard"></Frame>
    <GridLayout row="1">
        <StackLayout verticalAlignment="bottom" row="2" class="bottom-nav">
            <GridLayout rows="*" columns="*,*,*,*,*,*" height="70">
                <Label id="ico1" text="test"></Label>
            </GridLayout>
        </StackLayout>
    </GridLayout>
</GridLayout>

现在home-page.js

var frameModule = require("tns-core-modules/ui/frame");
var HomeViewModel = require("./home-view-model");

var homeViewModel = new HomeViewModel();

function pageLoaded(args) {
  var page = args.object;
  page.bindingContext = homeViewModel;

  var root = frameModule.getFrameById('dashboard');
// this console.log will show frame's info
  console.log(root);
// But this below undefined. Why the frame cannot find this element ?

  var ico = root.getViewById('ico1');
  console.log(ico);
}

exports.pageLoaded = pageLoaded;

Answer 1

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div id="app"> <div class="container"> <button class="btn btn-success mt-5 mb-5" @click="addNewSection"> New Deal Section </button> <div class="card mb-3" v-for="(section, index) in sections"> <hr> <div class="card-body"> <button class="btn btn-success mt-5 mb-5" @click="addNewItem(index)"> <!-- passing the index --> New Item </button> <span class="float-right" style="cursor:pointer" @click="deleteSection(index)"> X </span> <h4 class="card-title">Deal section {{ index + 1}}</h4> <div class="employee-form"> <input type="text" class="form-control mb-2" placeholder="Item" v-model="section.item"> </div> <div class="employee-form" v-for="(addition, indexSection) in section.additionals"> <!-- additionals of the section --> <input type="text" class="form-control mb-2" placeholder="Addition" v-model="addition.item"> <span class="float-right" style="cursor:pointer" @click="deleteAdditional(index,indexSection)"> X </span> </div> </div> </div> </div> </div>中没有否 getElementById，但是有一种称为 tns-core-modules 的页面方法 。要使用它，您需要通过当前框架参考获取页面参考。

以下是如何在选定框架中获取当前页面的示例。

getViewById