Skip to content

Ternary if and parenthesis makes UI not update #814

@emiloberg

Description

@emiloberg

Reproduced in a clean 1.3.0. Bug was introduced in 1.3.0.

When wrapping a ternary if in a parenthesis (e.g. <Label text="{{ (data === 0) ? 'off' : 'on' }}"/>), the UI does not react to object changes. When writing the same thing without a parenthesis (<Label text="{{ data === 0 ? 'off' : 'on' }}"/>) it works as it should.

However, on first paint/load, it works with the parenthesis. This inconsistency could be the source of bugs and can be very hard to find (believe me and the hours I spent yesterday...).

Example

This example shows a label and two buttons to change the binding context. If bindingContext.data is 0 the label should read 'off', if it is 1 it should read 'on'. When first navigating to the page, it correctly reads 'off' (as the default value of data is 0). If you change the default value of data to 1 it correctly reads 'on'.

Tapping the "On" or "Off" button which changes the binding context does not update the UI. Removing the parenthesis solves the problem.

I'd say that the expected behavior is that it should work both with or without the parenthesis.

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
  <StackLayout>
    <Label text="{{ (data === 0) ? 'off' : 'on' }}"/>
    <Button text="On" tap="tapOn" />
    <Button text="Off" tap="tapOff" />
  </StackLayout>
</Page>
var Observable = require('data/observable');

var viewModel = new Observable.Observable({
    data: 0
});

exports.pageLoaded = function pageLoaded(args) {
    args.object.bindingContext = viewModel;
};

exports.tapOn = function() {
    viewModel.set('data', 1);
};

exports.tapOff = function() {
    viewModel.set('data', 0);
};

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions