Force update array on Repeater - repeater

Question

When using XML to build an repeater, like the example above, how to update the array later?
<Repeater items="{{ letras }}" id="rep">
<Repeater.itemsLayout>
<StackLayout horizontalAlignment="center" orientation="horizontal" />
</Repeater.itemsLayout>
<Repeater.itemTemplate>
<Button text="{{ l }}" cssClass="palavraPrincipal" />
</Repeater.itemTemplate>
</Repeater>
I know that there is an way to do that if I create the repeater on Javascript file, but on a pre-made XML repeater?

Answer 1

To make changes in the viewmodel (the letras array in your example) reflect in the UI you need to use Native Script's data binding.
Below is an example which, given the XML view in your post, will:
Require the 2 modules, observable (for observable objects) and observable-array (for arrays).
Create a viewmodel, which is the object which holds the data
Bind the viewmodel to your page's binding context.
Every 1 second, add a new item to the viewmodel (which will get reflected to the UI).
I set the binding context of the page to the viewmodel. There's no need to set the binding context on the Repeater element, as calebeaires do in his example, as the Repeater will look at the page's binding context.
However, if you want to, you can use e.g. 2 different binding contexts, 1 for the page and one for the Repeater element. Just substitute
page.bindingContext = viewModel;
for
page.getViewById('rep').bindingContext = viewModel;
Full code:
var observableModule = require("data/observable");
var observableArrayModule = require("data/observable-array");
var viewModel = new observableModule.Observable({
letras: new observableArrayModule.ObservableArray([
{ l: 'First' },
{ l: 'Second' },
{ l: 'Third' },
])
});
function pageLoaded(args) {
var page = args.object;
page.bindingContext = viewModel;
//page.getViewById('rep').bindingContext = viewModel;
// Add a new item every 1 second.
setInterval(function() {
viewModel.letras.push({
l: 'New item'
});
}, 1000);
}
exports.pageLoaded = pageLoaded;

Answer 2

Find out:
A. Declare and variable:
var repeater;
B. Declare an ID to the repeater:
<Repeater items="{{ items }}" id="rep">
<Repeater.itemTemplate>
<Button text="{{ $value }}" />
</Repeater.itemTemplate>
</Repeater>
C. Redeclare it on page load:
function pageLoaded(args) {
var page = args.object;
repeater = view.getViewById(page, "rep");
page.bindingContext = jogo;
}