Update view when data is changed in other views

Hi all, I’m trying to make a simple news feed app, in witch the user can select for which categories receive updates.
I have an app with a side drawer with two pages.
In one page there are the news feed (like twitter), and in the other page there is a list with toggles to enable or disable the categories.
I would like that when the user changes the categories from the categories page, when he returns to the feed page, the view should be correctly updated.
The observable variable in the JS code is correctly udated, but to see the changes in the view,the user has to pull-down-to-refresh (the pull down repeats the same exact method called to receive the correct feed from the server that is called changing the categories in the other page).

I have my MainView.ux with a navigator and two views included:


<Panel ux:Class="MainView" >  
<Router ux:Name="routerPages" />
<JavaScript File="../JS/Navigation/sidebarNavigation.js"/>
  <EdgeNavigator ux:Name="edgeNavigator">
  <Sidebar> ... </Sidebar>
  <DockPanel> 
     <Navigator DefaultTemplate="feed">
         <FeedPage router="routerPages" ux:Template="feed" />
         <CategoriesPage router="routerPages" ux:Template="categories" />
     </Navigator>
   </DockPanel>
  </EdgeNavigator>
</Panel>

The FeedPage is:


<ScrollView ux:Class="FeedPage">
<JavaScript File="../JS/feed/readFeed.js"/>
<DockPanel>
<PullReload Dock="Top" />
    <StackPanel Alignment="Top">
        <Each Items="{feedList.feed}">
            <NewsItem />
        </Each>
    </StackPanel>
</DockPanel>
</ScrollView>

with its JS File:


var feedList = Observable({feed: []});
function readFeed(){
// here I ask the server the list based on the categories and I assign it to feedList.value
}

module.exports = {
feedList: feedList;
}

The CategoriesPage is:


<ScrollView ux:Class="CategoriesPage">
<JavaScript File="../JS/feed/categories.js"/> 
    <StackPanel Alignment="Top">
        <Each Items="{categoriesList.categories}">
            <CategoriesItem />
        </Each>
    </StackPanel>
</ScrollView>

with its JS File:


var feedJS = require("../feed/readFeed");  //the readFeed is Bundled in .unoproj file
function listOfCategoriesHasChanged(){
feedJS.readFeed();
}

I tried a lot of combinations (with both JS Bundled, only one, no one, adding feedList as export also in categories.js, I also tried to use the same JS file for both the files) both without success. It seems that the Observable value changes in the view only if the function is called when that view is active.

How can I solve this?

Hi,

i had a similar problem to solve it you should create another globals.js wich contains the feedlist so you can refer it from both JS’s.

Thanks Zaulis,
I solved!

But is this the right way to achieve this or it’s just a good workaround?
Are there other methods to do it?

If u want to have it as a class i guess this is the way to go: remember… it’s a class so you can create as many instances of that class as you want so: how does the sidebar know where to “draw” the results? (or filter or whatever)

you can also use the onParameterChanged inside the FeedPage.js

    this.onParameterChanged(function(param) {
         console.log("filter: " + param.filter);
    });

and call it from the sidebar:

   router.push("whateverPage", {filter: "cars", userId: vUserId});

so when u call the page from the side bar it will execute the code whenever the filter changes