Nativescript: Support Array.Length In Expressions

[burkeholland]

Currently, NativeScript binding does not support array length in expressions. It's a common use case to show/hide elements based on the existence of items in a collection. See the TodoMVC example.

It would be nice if NativeScript would evaluate length in expressions and re-evaluate when the length changes...

<Label text="No Items" visibility="{{ items.length > 0 ? 'visible' : 'collapsed' }}" />

Currently, I am doing this by maintaining a separate property on the model that I manually update whenever I also change the items in the collection...

class ViewModel extends Observable {
    hasItems: boolean = false
    items: ObservableArray<string>

    constructor() {
      super();

      this.items = new ObservableArray<string>([]);
    }

    addItem() {
      this.items.push('A New Item');
      this.set('hasItems', true);
    }
}

[burkeholland]

I've realized that for now I can bind to the ObservableArray.changeEvent and at least I only have to update the hasItems property in one place.

 this.things.on(ObservableArray.changeEvent, (args: any) => {
        if (this.things.length > 0) {
            this.set('hasThings', true);
        }
        else {
            this.set('hasThings', false);
        }
    })

[enchev]

Hey @burkeholland,

There is no problem to use length even now however you will need to change the expression since > is not valid symbol for XML attribute value. Here is an example:

<Label text="No Items" visibility="{{ items.length === 0 ? 'collapsed' : 'visible' }}" />

Here is a bit more info in the standard:
https://www.w3.org/TR/xml/#NT-AttValue

[jorotenev]

Here's a repo with a minimal example showing that using the .length property of OA doesn't seem to work if used to show/hide items.

@enchev , am I missing something obvious? :)

[grantwparks]

What happened with this? Still, length does not seem to be known in the XML. Why was this closed?

[grantwparks]

If one can't use ">", then why is it in the NS docs?

Logical not operator and comparators

!,<, >, <=, >=, ==, !=, ===, !==,||, &&

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.