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