Aktualisieren Sie ein Label in Echtzeit mit einer Antwort von einer Funktion

Question

Ich habe ein fft-Plugin, das mir Größen aus Echtzeit-Mikrofon-Eingang zurückgibt. Bei einer Show funktioniert diese Größe in der Konsole ganz gut. Aber ich möchte zeigen diese Größen auf dem Bildschirm für diese ich möchte ein Label zum ersten Mal aktualisieren.

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 

Ansicht:

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

</Page> 

Gibt es eine andere Abhilfe für dieses?

Answer 1

Basierend auf Ihrem Szenario habe ich ein Ansichtsmodell für Ihre Magnitude erstellt. Dann können Sie es einfach an Ihr Label binden, indem Sie die Seite bindinContext verwenden.

Zum Beispiel:

Stärke-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; 

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

Haupt page.xml

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

Answer 2

Versuchen Sie es wie folgt tun:

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

Führen Sie die getViewById ab Seite, sehen nicht.