Nativescript SegmentedBar propertyChangeEvent

Question

Ich habe eine segmentierte Leiste in Nativescript erstellt, aber meine Änderungen werden von dem von mir erstellten EigenschaftsChangeEvent-Listener nicht übernommen. Kann mir jemand sagen, was mein Fehler ist?

-Code für XML

<SegmentedBar row="1" colspan="3" class="toggles" selectedBackgroundColor="#B76769" selectedIndex="{{ bookingsObsSelectedIndex }}"> 
     <SegmentedBar.items> 
      <SegmentedBarItem title="Product"/> 
      <SegmentedBarItem title="Service" completed="false"/> 
      <SegmentedBarItem title="Total" completed="true"/> 
     </SegmentedBar.items> 
</SegmentedBar> 

meinen Index beobachtbaren Objekt Bindung und eine Property Veranstaltung.

var observableModule = require("data/observable"); 
var bookingsObsSelectedIndex = new observableModule.Observable(); 

bookingsObsSelectedIndex.on(observableModule.Observable.propertyChangeEvent, function (propertyChangeData) { 
    console.log("Property changed for bookingsObs, changed property name: = "+propertyChangeData.propertyName); 
}); 

Entschuldigung, ich bin neu mit Nativescript. Versuchen, den angegebenen Schritten zu folgen here.

Answer 1

Die SO Antwort, die Sie lesen, ist ein bisschen alt und seit der Ein selectedIndexChanged Ereignis wurde zu dem SegmentedBar hinzugefügt. Anstatt also mit dem propertyChanged Ereignisse des gebundenen beobachtbaren können Sie sich direkt an das neue Ereignis Haken:

<SegmentedBar row="1" colspan="3" class="toggles" selectedBackgroundColor="#B76769" 
selectedIndex="{{ bookingsObsSelectedIndex }}" selectedIndexChanged="segmentedBarIndexChanged"> 
      <SegmentedBar.items> 
       <SegmentedBarItem title="Product"/> 
       <SegmentedBarItem title="Service" completed="false"/> 
       <SegmentedBarItem title="Total" completed="true"/> 
      </SegmentedBar.items> 
    </SegmentedBar> 

Und dann in Ihrer Seite Javascript haben, so etwas wie:

function segmentedBarIndexChanged(args) { 
    console.log("Tab selected: " + args.newIndex + ", old one is:" + args.oldIndex); 
} 
exports.segmentedBarIndexChanged = segmentedBarIndexChanged; 

Answer 2

Sie sollten stattdessen addEventListener Methode on verwenden, um Eigenschaftsänderungsereignis zu behandeln. Ihr Code sollte wie folgt sein:

Haupt page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo"> 
    <StackLayout> 
    <SegmentedBar selectedIndex="{{ bookingsObsSelectedIndex }}"> 
     <SegmentedBar.items> 
      <SegmentedBarItem title="Product"/> 
      <SegmentedBarItem title="Service" completed="false"/> 
      <SegmentedBarItem title="Total" completed="true"/> 
     </SegmentedBar.items> 
    </SegmentedBar> 

    </StackLayout> 
</Page> 

Haupt page.js

var observable_1 = require("data/observable"); // Event handler for Page "navigatingTo" event attached in main-page.xml function navigatingTo(args) { 
    // Get the event sender 
    var page = args.object; 
    var newObservable = new observable_1.Observable(); 
    newObservable.set("bookingsObsSelectedIndex", 1); 
    newObservable.addEventListener(observable_1.Observable.propertyChangeEvent, function (pcd) { 
     console.log(pcd.eventName.toString() + " " + pcd.propertyName.toString() + " " + pcd.value.toString()); 
    }); 
    page.bindingContext = newObservable; } exports.navigatingTo = navigatingTo; 

In Bezug auf, dass Sie mehr über die lesen konnte Bindung here