Nativescript SegmentedBar propertyChangeEvent

Question

我在Nativescript中创建了一个分段条，但是我的更改没有被我创建的propertyChangeEvent侦听器拾取。有人能告诉我我的错误是什么吗？

规范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> 

绑定我的索引来观察的对象，并创建一个PropertyChange事件。

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

对不起，我是新的Nativescript。尝试遵循指定的步骤here.

Answer 1

您正在阅读的SO答案有点旧，而且自从已将selectedIndexChanged事件添加到SegmentedBar。因此，而不是使用propertyChanged事件绑定的观察到的，你可以直接挂接到新的事件：

<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> 

然后在你的页面的JavaScript有这样的：

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

上

Answer 2

您应该使用addEventListener方法代替on来处理属性更改事件。你的代码应该是这样的：

主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> 

主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; 

至于，你可以阅读更多有关绑定here