Nativescript SegmentedBar propertyChangeEvent

Question

我在Nativescript中创建了一个segmentedbar，但我的更改并未被我创建的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

您应该使用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

的更多信息

Answer 2

您正在阅读的SO答案有点陈旧，从那时起selectedIndexChanged事件被添加到SegmentedBar。因此，您可以直接挂钩到新事件，而不是使用绑定的observable的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;