I try to filter an observable list based on an observable inside that list. In this example I want to filter the list based on the active status. The status change is observed, but the activeList does not update or even get entries.
<App>
<ScrollView>
<StackPanel>
<Button Text="add To list" Clicked="{addToList}" />
<Text>Items in list</Text>
<Each Items="{list}">
<Button Text="{ID}" Clicked="{activate}" />
</Each>
<Text>activated Items</Text>
<Each Items="{activeList}">
<Button Text="{ID}" Clicked="{deactivate}" />
</Each>
<Text>check active state changes</Text>
<Each Items="{list}">
<Button Text="{ID}: {active}" Clicked="{deactivate}" />
</Each>
</StackPanel>
</ScrollView>
<JavaScript>
var Observable = require('FuseJS/Observable');
var list = Observable();
var activeList = list.where(function(act){
return act.active.value === 1;
});
function activate(arg){
list.forEach(function(c) {
if (c.ID == arg.data.ID) {
c.active.value = 1;
}
});
}
function deactivate(arg){
list.forEach(function(c) {
if (c.ID == arg.data.ID) {
c.active.value = 0;
}
});
}
function addToList(){
newID=Math.floor((Math.random() * 100) + 1);
list.add({ID: newID, active: Observable(0)});
}
module.exports = {
addToList: addToList,
deactivate: deactivate,
activate: activate,
list: list,
activeList: activeList
}
</JavaScript>
</App>
I tried a lot of things based on the FilterOnObservableCondition sample, but without any success, e.g.:
var ACTIVE= {
on: 1,
off: 0
};
var status = Observable(ACTIVE.on);
var filteredList = status.flatMap(function(stat){
return list.where(function(li){
return li.status === stat;
});
});
function activate(arg){
list.forEach(function(c) {
if (c.id == arg.data.id) {
c.status = ACTIVE.on;
}
});
}
Major problem here, besides the fact that filteredList is not updated, is that the status in the list is itself not an observable anymore, but it needs to be for my purpose.
So the question is: How can I filter the list based on the observable inside that list ?
EDIT: added complete example