Data binding

Each batch starts with an empty Observable and an empty ObservableArray that are submitted to each execution context of a callback.

These objects can be used in any View like a ListView or a Label, e.g.

Example

Code.behind

JavaScript

import Frame = require("ui/frame");
import {Observable} from "data/observable";
import Batch = require("nativescript-batch");

export function startBatch(args) {
    var button = args.object;

    var label = Frame.topmost().getViewById('my-label');
    var listView = Frame.topmost().getViewById('my-listview');

    var batch = Batch.newBatch(function(ctx) {
                                   // set 'labelText' property of 'bindingContext'
                                   // of 'label'
                                   //
                                   // this is the same object as
                                   // in 'batch.object'
                                   ctx.object.set("labelText", "Operation #1");

                                   // add item for 'bindingContext'
                                   // object of 'listView'
                                   //
                                   // this is the same object as
                                   // in 'batch.items'
                                   ctx.items.push({
                                       text: "Operation #1 executed"
                                   });
                               })
                     .then(function(ctx) {
                               ctx.object.set("labelText", "Operation #2");

                               ctx.items.push({
                                   text: "Operation #2 executed"
                               });
                           });

    var listViewVM = new Observable();
    listViewVM.set("batchItems", batch.items);

    label.bindingContext = batch.object;
    listView.bindingContext = listViewVM;

    batch.start();
}

View

XML

<Page xmlns="http://schemas.nativescript.org/tns.xsd">
  <GridLayout rows="64,*">
    <Button row="0" text="Start"
            tap="{{ startBatch }}" />

    <StackPanel>
      <Label id="my-label"
             text="{{ labelText }}" />

      <ListView id="my-listview"
                items="{{ batchItems }}">

        <ListView.itemsTemplate>
          <Label text="{{ text }}" />
        </ListView.itemsTemplate>
      </ListView>
    </StackPanel>
  </GridLayout>
</Page>