Listview Binding issue


#1

I have a list view that has a data binding to my page’s bindingContext. There is a button on that listview. When that button is clicked I can get access to the object for that listview item by accessing args.object.bindingContext. When I modify a variable in the buttons bindingContext, I have verified that the page’s view model that is assigned to the bindingContext is updated, however the listview display is not refreshed.

var Observable = require("data/observable").Observable;
var page;

function launchMainPage(args) {
    page = args.object;
    var viewModel = new Observable();
    viewModel.activeList = [{"name":"James Doe","inRoute":false,"removing":false}];
    page.bindingContext = viewModel;
}
exports.launchMainPage = launchMainPage;

function removeName(args) {
	args.object.bindingContext.removing = true;
}
exports.removeName = removeName;
<ListView id="activeList" height="100%"  items="{{ activeList }}">
	<ListView.itemTemplate>
		<StackLayout class="{{ activeNamesClassFilter( inRoute, removing ) }}">
			<GridLayout columns="*,75,75">
				<Label col="0" text="{{ name }}" />
				<Button class="inRouteButton" col="1" text="In Route" tap="inRoute" />
				<Button class="removeButton" col="2" text="Remove" tap="removeName" />
			</GridLayout>
		<StackLayout height="3px" backgroundColor="#4c4c4c"></StackLayout>
     </ListView.itemTemplate>
 </ListView>

Data from page’s binding context BEFORE the button is pushed:
[{“name”:“James Doe”,“inRoute”:false,“removing”:false}]

Data from page’s binding context AFTER the button is pushed:
[{“name”:“James Doe”,“inRoute”:false,“removing”:true}]

The removing element is set to true, which is supposed to change the class of the StackLayout using a binding expression function (which I have verified to be working on a fresh data load), but once the removing element is changed the stacklayout class does not change.

Any help would be greatly appreciated!


#2

Quick side note:
Adding this to the removeName function works, however I thought that 2 way binding should make this happen automatically.

var listView = page.getViewById("activeList");
listView.refresh();

#3

You need the listView.refresh() here, because you are making changes inside the ObservableArray item,
you are not adding/removing item from ObservableArray.

If you were to add/remove item from ObservableArray, you wouldn’t have to refresh.

If the items inside the array are of type Observable, then this might work (But I’ve not tried it, and don’t recommend it either).