ListView with EditabledataSource

list-view.js

var __extends = this.__extends || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};
var view = require("ui/core/view");
var CELLIDENTIFIER = "cell";
function pageLoaded(args) {
    var page = args.object;
    var listView = view.getViewById(page, "list");
    var itemsArr = [];
    for (var i = 1; i <= 10; i++) {
        itemsArr.push({ title: "List item " + i });
    }
    listView.items = itemsArr;
    if (listView.ios) {
        var myDataSource = EditableDataSource.initWithOwnerBaseDataSource(this, listView.ios.dataSource);
        listView.ios.dataSource = myDataSource;
        listView["__keepDataSourceReference"] = myDataSource;
    }
}
exports.pageLoaded = pageLoaded;
var EditableDataSource = (function (_super) {
    __extends(EditableDataSource, _super);
    function EditableDataSource() {
        _super.apply(this, arguments);
    }
    EditableDataSource.initWithOwnerBaseDataSource = function (owner, baseDataSource) {
        var ds = EditableDataSource.new();
        ds._owner = owner;
        ds._baseDataSource = baseDataSource;
        return ds;
    };
    EditableDataSource.prototype.tableViewNumberOfRowsInSection = function (tableView, section) {
        return this._baseDataSource.tableViewNumberOfRowsInSection(tableView, section);
    };
    EditableDataSource.prototype.tableViewCellForRowAtIndexPath = function (tableView, indexPath) {
        return this._baseDataSource.tableViewCellForRowAtIndexPath(tableView, indexPath);
    };
    EditableDataSource.prototype.tableViewCanEditRowAtIndexPath = function (tableView, indexPath) {
        console.log("tableViewCanEditRowAtIndexPath: " + indexPath.row);
        return true;
    };
    ;
    EditableDataSource.prototype.tableViewCommitEditingStyleForRowAtIndexPath = function (tableView, editingStyle, indexPath) {
        console.log("tableViewCommitEditingStyleForRowAtIndexPath: " + indexPath.row);
        if (editingStyle === UITableViewCellEditingStyle.UITableViewCellEditingStyleDelete) {
            console.log("TODO: delete the item");
        }
    };
    ;
    EditableDataSource.ObjCProtocols = [UITableViewDataSource];
    return EditableDataSource;
})(NSObject);

list-view.ts

import view = require("ui/core/view");
import list = require("ui/list-view");

var CELLIDENTIFIER = "cell";

export function pageLoaded(args) {
    var page = args.object;
    var listView = <list.ListView>view.getViewById(page, "list");

    var itemsArr = [];
    for (var i = 1; i <= 10; i++) {
        itemsArr.push({ title: "List item " + i });
    }

    listView.items = itemsArr;
    if (listView.ios) {
        // Create an instance of our data-source implementation that wraps the existing data-source
        var myDataSource = EditableDataSource.initWithOwnerBaseDataSource(this, listView.ios.dataSource);
        listView.ios.dataSource = myDataSource;

        // This is needed if we don't keep a reference to the new data source in the JS world it might be collected by the GC 
        listView["__keepDataSourceReference"] = myDataSource;
    }
}

class EditableDataSource extends NSObject implements UITableViewDataSource {
    public static ObjCProtocols = [UITableViewDataSource];

    private _owner: list.ListView;
    private _baseDataSource: UITableViewDataSource;

    public static initWithOwnerBaseDataSource(owner: list.ListView, baseDataSource: UITableViewDataSource): EditableDataSource {
        var ds = <EditableDataSource>EditableDataSource.new();
        ds._owner = owner;
        ds._baseDataSource = baseDataSource;
        return ds;
    }

    public tableViewNumberOfRowsInSection(tableView: UITableView, section: number) {
        return this._baseDataSource.tableViewNumberOfRowsInSection(tableView, section);
    }

    public tableViewCellForRowAtIndexPath(tableView: UITableView, indexPath: NSIndexPath): UITableViewCell {
        return this._baseDataSource.tableViewCellForRowAtIndexPath(tableView, indexPath);
    }

    public tableViewCanEditRowAtIndexPath(tableView, indexPath): boolean {
        console.log("tableViewCanEditRowAtIndexPath: " + indexPath.row);
        return true;
    };

    public tableViewCommitEditingStyleForRowAtIndexPath(tableView, editingStyle, indexPath) {
        console.log("tableViewCommitEditingStyleForRowAtIndexPath: " + indexPath.row);
        if (editingStyle === UITableViewCellEditingStyle.UITableViewCellEditingStyleDelete) {
            console.log("TODO: delete the item");
        }
    };
}

list-view.xml

<?xml version="1.0" encoding="UTF-8" ?>
<Page loaded="pageLoaded">
  <ListView  id="list">
    <ListView.itemTemplate>
      <StackLayout>
        <Label text="{{ title }}" margin="5 10" horizontalAlignment="center"/>
      </StackLayout>
    </ListView.itemTemplate>
  </ListView>
</Page>