Binding ListViews to simple arrays

6 posts, 0 answers
  1. TJ
    TJ avatar
    58 posts
    Member since:
    Aug 2013

    Posted 27 Jan 2015 Link to this post

    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
  2. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 27 Jan 2015 in reply to TJ Link to this post

    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




  3. TJ
    TJ avatar
    58 posts
    Member since:
    Aug 2013

    Posted 28 Jan 2015 Link to this post

    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
  4. Erjan Gavalji
    Admin
    Erjan Gavalji avatar
    1455 posts

    Posted 29 Jan 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. TJ
    TJ avatar
    58 posts
    Member since:
    Aug 2013

    Posted 29 Jan 2015 in reply to Erjan Gavalji Link to this post

    Hi Erjan,

    Ok that makes sense.

    Thanks,
    TJ
  6. Nedyalko
    Nedyalko avatar
    1 posts
    Member since:
    Jan 2009

    Posted 06 Apr 2015 in reply to Ian Link to this post

    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>

Back to Top