In my application I am using backbone views for different pages like users, tasks, calendar etc by using backbone router I am switching from one view(e.g Taskview) to another view(say calendar view). everything works fine except dom ready function don't work after I switch the view.
Backend of my application is in laravel so I have a common laravel view for all pages and I am just switching backbone views without any page refresh. My dom ready functions work one time after page refresh but if I switch to another view they stop working.
Note: Dom ready functions are linked to view template classes and id's. All view's have similar templates and similar id's. But when I switch views I remove the old view and appends new view along with its templates.
Any ideas how can I get these working. for document ready I am using domready from require.js
You might be misunderstanding what $( document ).ready() is.
$( document ).ready() will only run once the page Document Object
Model (DOM) is ready for JavaScript code to execute.
http://learn.jquery.com/using-jquery-core/document-ready/
And Since You are making SPA(single page application) which control DOM to change page and never move to another html file.So $( document ).ready() only get fired once.
Backbone.js fires "route" event when Backbone changes page.
"route" (router, route, params) — Fired by history (or router) when
any route has been matched.
http://documentcloud.github.io/backbone/#Events-catalog
yourMainController.listenTo(yourRouter,"route", function(route, params) {
console.log("move to " + route);
});
You can use the event instead.
Related
I have a web page that was developed using Backbonejs and Marionettejs.
I have a lot of views, the problem is when i enter for the first time to the app or i reload the webpage if i interact (make any click) in the page i think the page stops loading and i receive in the console error that can't navigate.
I tried to resolve this issue using requirejs or ensurejs but I had no success.
There is a way to ensure the web page is loaded completely befor the user send an event or prevent the user to make that?
When you say "page loaded" do you mean the DOM or actually downloaded the files?
To me it sound more like a routing issue. Try to double check if all the callback functions of the marionette router are specified and also the route you want to
navigate to is avaiable.
If you mean the DOM, every Marionette View has 2 callbacks about DOM rendering. The first one: onRender is called when the new HTML is ready to go in the DOM, but not appended yet and onDomRefresh is called when the new HTML is actually in the DOM. So, if you need to know when the page is rendered use onRender, when you also have to know if is in the DOM use onDomRefresh.
Like this:
var test = Marionette.ItemView.extend({
onRender: function() { ... },
onDomRefresh: function() { ... }
})
Require is to load files in a asynchronos way. You could definitely improve the architecture of your app.
Please add more details so i can give u a more specific answer.
I have also made a skeleton of a Backbone / Marionette / Require app. Check it out at: https://github.com/LucaMele/skeleton-marionette-require-gulp
I've used UI router in the past in single page applications and found it prefect for loading new views and syncing them with the URL. However, I now have a normal multi-page ecommerce site which uses Angular a lot on various pages. Including te search results page.
I need to use ui-router only on this page to do ajax paging. Basically the content is already loaded onto the page and I have an ng-repeat for the results. It's a very simple set up.
What I want to do is change the state/url when the user hits the next/previous buttons and watch the stateParams to look for the new page number, then manually reload the new results and re-bind the ng-repeat to show the new results. Obviously I could load new search results without using ui-router at all but I want the back button to work so that you can go back through the pages.
Now, as far as I can see none of this requires any ui-view tags, or templates or controllers. I simply want to update the URL when a button is clicked and watch for changes. Is this possible with UI-router and if it is then what routes (if any) do I put into $stateProvider config?
Any help would be greatly appreciated.
I'm currently using directives in my ionic app, there directives are normally bind to a angular controller. So my problem is, when I navigate through the app, my controllers are not loading (loads for the first time) and hence I cannot setup some initial values.
Following is an example
I navigate to users screen/page
users controller loads (When I check with Chrome dev tools)
I navigate to home screen
I navigate back to users screen
At this point I expect users controller to load again, to setup my initial values, but it's not happening
I'm not sure if this is the default behavior, or am I missing something?
if you are using nested states, parent.child1, parent.child2, parent only loads 1 for the entire hierarchy, changing from child1 to child 2 will not reload the parent controller, thats one of the pros of using ui-router.
also note that with ionic latest version they introduced view caching so, the controller is only instanciated once for each view, to prevent that you need to use
cache-view="false"
in your ion-view
http://ionicframework.com/docs/api/directive/ionNavView/
I saw in many websites like twitter.com when you navigate between views by clicking navigation bar menus, then views loaded only one time and the loading spinner appear only for the first time the view has been loaded. If you back to the view again,it loaded directly and the loading spinner does not appear again.
I wonder, how can i do something like that using AngularJS ?. I need any tutorials to help me doing this or put me on the road.
This is already a core part of angular. Have a read of the $templateCache documentation. Here is a simple excerpt:
The first time a template is used, it is loaded in the template cache for quick retrieval. You can load templates directly into the cache in a script tag, or by consuming the $templateCache service directly.
So when using something like ng-include to grab a remote template via a file, it will only be loaded once, and automatically placed into this cache and reused when necessary.
If instead you are wondering how you go about only reloading part of the page, then you need to look at ng-view (which is part of the basic route module), or ui-router for more complex hierarchical view layouts.
I am I new to Angular and UI Router.
Plunk http://plnkr.co/edit/1wfyrGryfGG5RtXozPFY?p=preview
Setup I have three top level application nav buttons Home, Projects, Help. They load different views home.html, projects.html and help.html using the Angular UI Router ui-view directive. This works good.
The Projects.html view has a tab bar with each tab corresponding to a project: D1, D2 D3 etc., I show the corresponding project tab using url router attributes.
Every time I click the Projects button it is reloading the tab bar completely. I loswe the current tab and hopefully if any nested views inside it. Basically the page contents of Project.html, invoking the controller as well.
I read through the wiki documents and couldnt figure out how to implement my required functionality. I am sure I am missing something. Will it always reload the view?
Question: How to avoid reloading the projects view contents so that I can retain the selected tab and all the contents as-is before switching to Home. Because I would have a lot of nested views and models on each project.
I wanted similar functionality too, but ui-router doesn't yet support it. I forked ui-router to support "parallel states" and submitted it to the project for comment. The gist of the conversation is that ui-router will eventually support some form of parallel states but not yet. In the meantime, you can try my fork of 0.2.10 which provides the parallel states that you want.
Read the conversation here: https://github.com/angular-ui/ui-router/issues/894
View the sample parallel tabs plunk here: http://plnkr.co/edit/YhQyPV?p=preview
Here is the fork; build it with grunt: https://github.com/christopherthielen/ui-router
One option would be to implement a service that can be used to maintain the previous state. Services persist over controller changes, thus they can be used to maintain the previous page state and updated when the route changes. something similar to this would work.
app.factory('persitDataService', [function(currentStateData){
var stateService = {
state:{
//your object data set to passed in data
}
//other functions here
};
return stateService
});
then in the controllers just inject the service and assign to a scope value. When the route changes just reset the data in service to new state and inject into new controller
This should work for the previous page state. If you are wanting to save the states of all previous pages then this becomes a larger problem but should be accomplished in much the same way only with a more complicated service setup.
This could also be combined with local and session storage