Binding ListViews to simple arrays

[TJ]

Hey all,

I have what I think is a simple question that I can't figure out. Here's the XML I'm using:

<Page loaded="load">
    <GridPanel>
        <ListView items="{{ list }}">
            <ListView.itemTemplate>
                <Label text=" ??? " />
            </ListView.itemTemplate>
        </ListView>
    </GridPanel>
</Page>

The `list` that the ListView is bound to is a simple array, e.g. `[ "one", "two", "three" ]`. So given that this is a simple array, how do I refer to the item's text in an item template? Basically what can I put in the ??? above to make this example work with a simple array?

Thanks,
TJ

[Ian]

Hi TJ,
I struggled a bit with a similar requirement last week and found I had to create an array of objects so that the ListView template could be bound to a specific, named property within each array item.

If you define a model file (eg. app/views/models/testModel.js)...

var observableArray = require("data/observable-array");
var testModel = new observableArray.ObservableArray();
testModel.Numbers = [
    {"Title": "One"},
    {"Title": "Two"},
    {"Title": "Three"}
];
module.exports = testModel;

Then, in your code-behind file (app/views/test.js)...

var view = require("ui/core/view");
var model = require("./models/testModel");
var page;
exports.load = function(args) {
    page = args.object;
    page.bindingContext = model;
}

And finally, the XML file (app/views/test.xml)...

<Page loaded="load">
    <GridPanel>
        <ListView items="{{ Numbers }}">
            <ListView.itemTemplate>
                <Label text="{{ Title }}" />
            </ListView.itemTemplate>
        </ListView>
    </GridPanel>
</Page>

Regards, Ian

[TJ]

Hi Ian,

Thanks. I tried this next, but when I do adding to the array no longer works in iOS (but, strangely, it does in Android). Here's the page's XML:

<Page navigatedTo="load">
    <GridPanel>
        <GridPanel.rowDefinitions>
            <RowDefinition height="auto" />
            <RowDefinition height="*" />
        </GridPanel.rowDefinitions>

        <StackPanel orientation="horizontal" row="0">
            <TextField width="200" hint="Add a language" text="{{ language }}" />
            <Button text="Add" click="add"></Button>
        </StackPanel>

        <ListView items="{{ list }}" row="1" id="list">
            <ListView.itemTemplate>
                <Label text="{{ name }}" />
            </ListView.itemTemplate>
        </ListView>
    </GridPanel>
</Page>

And here's its JavaScript:

var observableModule = require( "data/observable" ),
    observableArray = require( "data/observable-array" ),
    viewModule = require( "ui/core/view" ),
    data = new observableModule.Observable(),
    view;

data.set( "language", "" );
data.set( "list", new observableArray.ObservableArray([
    { name: "C#" }, { name: "Java" }, { name: "JavaScript" }
]));

exports.load = function( args ) {
    view = args.object;
    view.bindingContext = data;
};
exports.add = function() {
    var language = data.get( "language" ),
        list = data.get( "list" );

    // Hide the keyboard on iOS (UIView.endEditing)
    if ( view._nativeView.endEditing ) { // Guard against Android, WP, etc
        view._nativeView.endEditing( true );
    }

    list.push({ name: language });
    data.set( "language", "" );
};

Anybody know what might be going on here?

Also, I think the fact that two of us ran into the same problem (trying to output a basic array) means there should be some solution available. I believe NativeScript uses Polymer's data binding syntax, and I can't find anything on their site either, which seems crazy.

TJ

[Erjan Gavalji]

Hey TJ,

This is related to the behavior of the text field when used in an Observable context. The behavior is fixed in the development implementation and the correct core will be available in the Beta release.

As per binding a basic array, you are right, this scenario is a pretty often-used one and we'd better put some research to it. Not sure if we'll manage for the Beta though...

Kind regards,
Erjan Gavalji
Telerik

 

 

[TJ]

Hi Erjan,

Ok that makes sense.

Thanks,
TJ

[Nedyalko]

In 0.10 version of NativeScript will be introduced a feature so called "object binding". This will enable scenarios evolving plain data objects (numbers, strings and so on). The syntax for using this feature is as follows:

 

<Page navigatedTo="load">
    <GridLayout>
        <ListView items="{{ list }}" row="1" id="list">
            <ListView.itemTemplate>
                <Label text="{{ $value }}" />
            </ListView.itemTemplate>
        </ListView>
    </GridLayout>
</Page>