I have angular2-nativescript application with several pages. structure is similar to gloceries example
All pages has very similar action bar content so I don't want to add all action bar event handlers for each page or add custom component to each page template
Is there any way to have single ActionBar component for all application pages? Also it is important to have an ability to access this component from all pages and call its methods from page class (so I can tell this component that it should hide/show some content). I want to use some action bar animation in future so my ActionBar shouldn't be recreated each time page changes
Related
The problem
I am trying to make a dynamic app sidebar to react and refresh when a new content category is created. However emitTo('docs.sidebar', 'refresh') to 'docs.sidebar' component is not working.
I have found out that when i start typing into input field - component 'docs.sidebar' disappears from loaded components in debugbar. Which obviously means that something refreshed in whole layout and the only component remains is the 'docs.create-category'.
Component 'docs.sidebar' has $listener for refresh included and is included in main layout using livewire directive.
#livewire('docs.sidebar')
And the component 'docs.create-category' is a full page component using the main layout where 'docs.sidebar' is included.
What have i tried?
I have tried to add wire:ignore and wire:ignore.self in both correlating components various places, however that did no help.
Attaching screen recording to see problem visually.
https://youtu.be/kkOrgQXVyGo
Views:
Layout: https://paste.laravel.io/7dfe2b11-e7c9-4905-a644-133c783e8ba6
Create category component: https://paste.laravel.io/92ea800a-96bc-4286-aedc-f16a65aa4e3f
So I have a Shell that has a home page and a settings page.
The settings page makes changes to a singleton service that the home's ViewModel is binded to (MVVM).
I have set up break points on the PropertyChangedEvents of elements on the Home page and they hit as soon as changes are made to the service's properties and their PropertyChanged is executed.
However, upon going back to the home page via the Shell, the page's UI only updates when the page is active and visible. This causes fields to flash when they change. But the breakpoints suggest that they should have updated before.
Is there a way to force refresh the UI before or are there any other alternatives?
For now I have made my view perform a Fade In animation so that changes to the ViewModel don't cause flashing.
Even I have a Xamarin Forms Shell app, and I also had the same issue, So what you can do is, Make the common properties Global as in make those properties in App.xaml.cs and mark them as static.
So when the User changes the property on settings change the App.PropertyName.
Then on the OnApearing method of homepage call a method on the ViewModel say LoadDataValues() and read the App.PropertyName and modify the UI as needed.
What this will do is just before the HomePage appears it will keep the UI of HomePage ready.
Let me know if you have further issues.
I am trying to understand how a Page event like navigatedFrom would be used.
Here is a base template:
<Page #navigatedFrom="navigatedFunc">
<StackLayout></StackLayout>
</Page>
Say in my script sections, I had the function navigatedFunc listed in the methods sections:
navigatedFunc: function(args) {
// what would I do here or check against? How would you check against a specific screen title you navigated from?
}
would it be used to check the specific view you navigated from? Like can I do a conditional check in that function that would say if a user comes from the Account page, then do something?
Those events are used if you want to run some code when a page appears or disappears. If you're familiar with native iOS apps, they're like the viewDidAppear and viewDidDisappear methods.
The navigatingTo event triggers when entering the page where it is registered.
The navigatedTo event triggers when when the navigation to the page has finished.
The navigatingFrom event triggers when a navigation away from the page starts.
The navigatedFrom event triggers when the navigation away from the page finished.
This image from the NativeScript documentation might help you visualize the flow:
I am adding some functionality to an existing Microsoft MVC 3 application. I cannot change the existing structure of the app itself while I do need to add some new functionality to the page. I have angular running in a div (hidden on load via jquery dialog). The MVC app has several tabs on the page. Each time a tab is chosen, the a partial cshtml (razor) loads. Along with that partial, my angular template is included. The partial references a js file that contains the angular controller. When it is first loaded and the user opens the tab and open the jquery dialog containing angular, everything works fine. I started to notice some funny behavior after the changes are saved. I noticed the same irregular behavior if I closed the dialog containing the angular template, switched to another tab, then switched back to the tab containing the angular template. Here's what is happening:
The partial being loaded by MVC reloads the angular template which initiates the angularjs controller method in the referenced js file
A new $scope is being generated each time this occurs.
Each time a controller method is invoked (via ng-click event tied to a button on the template) teh method will execute n number of times with n being the number of times the partial has been loaded since the last full page refresh.
I proved this method by logging the $scope object to the window in the start of the controller method
window['scope_' + new Date().getTime().toString()] = $scope;
After each partial page load, a new $scope object is logged to the window. Pressing a button on the template invoked a certain method tied to the ng-click event. This event fires multiple times. But calling the method manually in the console using the oldest recorded scope object in the window
scope_1378413848781.$apply(scope_1378413848781.getSomeData())
it works as intended. So, my question is, how do I prevent the controller from adding a new scope every time the MVC framework reloads the partial?
Here are some of the things I've tried that didn't work:
Adding a global flag and exiting the controller method if it was set
moving the controller reference to the _layout.cshtml file
destroying the scope when the dialog containing the template is closed
One final note, I am not using the angular route provider which I know can cause the controller to execute twice when used in conjunction with .
It appears that Angularjs was not meant to be used in this fashion. Per the angular docs:
You can use Angular to develop both single-page and round-trip apps, but Angular is designed primarily for developing single-page apps...You normally wouldn't want to load Angular with every page change, as would be the case with using Angular in a round-trip app.
To resolve the issue, I moved the angular template as well as the reference to the controller and angular.min.js to the shared _Layout.cshtml file. This partial file loads first and is only reloaded when the entire page is refreshed. Adding angular references and loading controllers in js files referenced in asp.net mvc 3 partials will cause scope replication that can be difficult to detect.
I need to have 3 different Fancyboxes with different content.
Have no trouble "triggering" the Fancybox on click but my issue is how can I associate a web form or usercontrol to the Fancybox if that makes sense?
Example: Say a user clicks on an anchor named "add to basket". I need the corresponding Fancybox with the appropriate content to render on click. What I don't know is:
Do I need to use another web form for the content?
Do I need to use a usercontrol for the content?
How to get fancybox to recognize which web form or usercontrol to
render according to which ever anchor the user clicks on as there
will be multiple instances of different fancyboxes... again, if that
makes sense.