update a label in realtime with a respond from a function

I have create a fft plugin that returns me magnitudes from realtime mic input. When a show this magnitudes in the console works all fine. But i want show this magnitudes on the screen for this i want update a label for the first time.

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

    });
}

log:

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

view:

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

</Page>

Is there a other workaround for this?


ANSWERS:


Based on your scenario I have created a view model for your magnitude.. then you can simply bind it o your label using the page bindinContext.

For example:

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);
}

main-page.xml

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

Try doing it like this:

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

Run the getViewById from page, not view.



 MORE:


 ? Nativescript RadListView not binding to source property
 ? How to get Mocha\Chai working with NativeScript iOS
 ? running NativeScript setup script for cli
 ? Installing NativeScript CLi
 ? Nativescript chart plugin
 ? Adding css animations to item
 ? Nativescript timed service or thread for geolocation tracking
 ? Connecting to localhost from Genymotion (Virtualbox)
 ? Nativescript screen size qualifiers not xml but css
 ? Nativescript. Execution failed for task ':mergeF0DebugResources'