使用函数的响应实时更新标签

Question

我创建了一个 fft 插件，returns 我从实时麦克风输入中获取幅度。当在控制台中显示这个幅度时一切正常。但是我想在屏幕上显示这个幅度，我想第一次更新标签。

var view = require("ui/core/view");
var FFt = require('fft')

Demo.prototype.pageLoaded = function(args) {
var page = args.object;

    var lbl = view.getViewById(page ,"fft");

var fft = new FFT()

    fft.run(function (magnitude) {

        console.log(magnitude); // this works

        lbl.text = magnitude // this not working

    });
}

日志：

76:20: -155.6750946044922
76:20: -158.35105895996094
76:20: -145.52996826171875

查看：

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" actionBarHidden="true" backgroundSpanUnderStatusBar="true">
    <StackLayout>
        <label id="fft" text="This is Label!" />
    </StackLayout>

</Page>

是否有其他解决方法？

Answer 1

尝试这样做：

var page = args.object;
var lbl = page.getViewById("fft");

运行 getViewById 来自页面，而不是视图。

Answer 2

根据您的情况，我已经为您的震级创建了一个视图模型。然后您可以使用页面 bindinContext 将它简单地绑定到您的标签上。

例如：

magnitude-view-model.js

var observable = require("data/observable");
var MagnitudeModel = (function (_super) {
    __extends(MagnitudeModel, _super);
    function MagnitudeModel() {
        _super.call(this);
        this._magnitude = "-150.020313164"; // your default value
    }
    Object.defineProperty(MagnitudeModel.prototype, "magnitude", {
        get: function () {
            return this._magnitude;
        },
        set: function (value) {
            this._magnitude = value;
            this.notifyPropertyChange("magnitude", value);
        },
        enumerable: true,
        configurable: true
    });
    MagnitudeModel.prototype.changeMagnitude = function (newValue) {
        this._magnitude = newValue;
        this.notifyPropertyChange("magnitude", newValue);
    };
    return MagnitudeModel;
}(observable.Observable));
exports.MagnitudeModel = MagnitudeModel;

main-page.ts

import { EventData, Observable } from "data/observable";
import { Page } from "ui/page";
import { MagnitudeModel } from "./magnitude-view-model";

var viewModel = new MagnitudeModel();

export function onLoaded(args: EventData) {
    var page = <Page>args.object;

    page.bindingContext = viewModel;

    // for testing purposes to test the data-binding on every two seconds 
    setInterval(function() {
        var oldMagnityude = viewModel.get("magnitude");
        var newMagnitude = parseFloat(oldMagnityude) + 20;
        viewModel.changeMagnitude(newMagnitude.toString());
    }, 2000);
}

主-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="onLoaded" actionBarHidden="true" backgroundSpanUnderStatusBar="true">
    <StackLayout>
        <Label text="{{ magnitude }}" />
    </StackLayout>
</Page>

使用函数的响应实时更新标签

update a label in realtime with a respond from a function

nativescript