backbone multiple views with the same model - javascript

I am doing an only front end project with backbone.
And at one point I want to do the following :
A basic form with some input
the user submit the form
Show some cool graph with d3 or google graph based on the inputs of the user.
The problem is that I don't have any backend so I never save the inputs of the user, How can I change the view and still have the data of the form?
I was thinking about storing it temporary into localstorage but it's not really a good solution for perfs...
Thanks

Router creates a model instance
Router passes that model instance to the form view constructor options
Router binds event listener view.on('formComplete', this.storeModel)
Router renders & attaches form view
User fills out form view
Form view sets the data from the form into the model
Form view triggers route or event (like this.emit('formComplete', this.model);)
Router's storeModel handler function takes the same model instance, stores it as this.model temporarily on the router, and then navigates to the graph view.
In the graph view route handler method, router passes this.model it to the graph view contsructor options, render, attach
This is sort of using your router as an in-memory data cache, but since you have no back end, you need to store data somewhere.

Im also doing an one view web app with backbone.
I think the point of your problem is you really has only one page but load different views into this page. Not change to another page.
I suppose your app url is http://xxx.xxx.xxx/#first_view. and use backbone Router to change views
If you just want keep the data until user refresh browser. Just save them into a Global js variable. Once you use something like
window.location = Global.getBaseURL() + "#second_view" to change your view. And you actually load the "second_view" by ajax and put html into current page. You never lose your js variable.
If you want keep data even user refresh or go to another page. You have to use sessionStorage. Save data into JSON format and convert them back to js variable once you finish loading the new page.

Related

Laravel AJAX call not working after reloading view?

I have a standard CRUD web app in Laravel that allows users to view and edit records. It also has a sorting mechanism that asynchronously (using AJAX) sorts the main records view.
This works fine until the user clicks on a record in the records view to edit it. Then they are redirected through the web router to a new Controller function that loads the update view for that record. When they click to save the SAME update function used to load the update view is fired a second time, and it updates the record and returns the ORIGINAL records view.
The problem is, the AJAX sort function for the records view only works BEFORE the update function is called. I've compared the HTML and JavaScript before and after a record is updated and it is IDENTICAL. So why does the AJAX function stop working?
My only guess is it has something to do with the web router. Predictably, the original read view is called with a GET method, and the update function uses POST, but I tried changing the "type" property in AJAX to POST with no luck.
Try adding _method=POST to your post data
Also do not forget to send csrf-token (axios does it automatically)

How to refresh a page once it's opened from a previous link?

I have a table with live data in it (meaning it is stored on the server and people who has access can view the data in their machine as well). I have a Create data page and View data page that contains the table. Once I have finished creating a new data and click a link going to the View page. The data should be there already.
I have tried the location.load() internal script in the View.html page that is triggered by the attribute onLoad="" but it's not working. However, when I create a button that has a function to refresh, it does work but I want it to be an auto refresh.
To make it easy and simple, use location.reload(). You can also use location.reload(true) if you want to grab something from the server.
You can simply use an jQuery Ajax call to make call to your backend API and fetch data, which you can add to your html table. This process you can handle in page/document ready or load events. I don't think you need to reload the page just to achieve this.
If you are working with AngularJs SPA (mentioning this as you added the tag), these two HTMLs/Pages can be rendered into the same layout based on the route and follow the above mentioned approach (using $http.get of Angular) to get view data and bind it to the respective view. As it is SPA, no concept of page reload.

realoding page in background without notifying user

After a successful http request i need to reload the page to update the view outside the ng-view so i am using $window.location.reload().This is working fine but the problem is i want to reload the page silently without notifying user as the page transition works in angularjs.I also used $route.reload() but this did not work in this case.So is there any way in angularjs to reload the page in background so that the user is unaware about the reload ?
$scope.save=function()
{
$window.location.reload();
}
when the http request is resolved just run the method that loads the view again (passing the new data)
You can use events in Angular Js for updating portion outside of the ng-view. Like emit event when http request done & then broadcast it it or listen as per your requirement.
I would prefer storing user details in $localStorage, so that it would be stored until cache is cleared. It comes very handy to store information such as user details in the client side and it can be accessed across all controllers. $localStorage service can be injected into any controller and values can be set. Resetting is also easy($localStorage.$reset()) to clearing information when required. You could also use $sessionStorage.
You solve this with using $rootscope, set username with $rootScope variable,
you will update that $rootScope value when you get new username in httpservice
Edit
If in your side menu username value in text like below:
<div id="elementId">UserName</div>
or
<span id="elementId">UserName</span>
then
assign new user name value to userNameValue variable and do like below:
Use Jquery $('#elementId').text(userNameValue)

How can I keep my input data when moving to other routes on AngularJS?

I have an AngularJS application which is dynamically created.
Because of that, it may have a normal <form> with a submit button, but inside of it there could be a link to another one, and another one and so on.
I've already accomplished to correctly submit the data no matter how deep in this "form-net" the user is, but the problem is that the user might not fill them in the "correct order", and the user is freely to do so.
For example, he/she could start filling FORM A and then realizing that there is FORM B inside of it, move to another route, filling and submitting FORM B and when coming back and FORM A it will be empty.
So, I want to pre-save all input data the user filled. I just want some sort of cache of any input the user might give, so the user can move freely from one form to another without an obligation to submit.
You could try using an Angular service and inject it as a dependency in all the controllers that the forms use. You would then bind the data to this service rather than to the controller. Since the service is a singleton, it will only be created once and will not get recreated as the user moves throughout your app. The data bound values will persist as long as you don't change them and the user stays in the app.
The service could look something like this:
app.service('MyService', function () {
return {
form1Data: {},
form2Data: {},
form3Data: {}
};
});
And then bind to the correct formNData field in your view layer. If the number of forms also ends up being dynamic, you can add a configuration block to your Angular app that indicates how many of these form data object you'll need and use that inside the service function.

Backbone differentiate client side rendering from server side rendering

I want to allow users to request webpages of my website both directly from the server or using links, which will be handled by Backbone's router.
When a user requests a webpage directly from the server, a full page is served (with html, head, body, stylesheets and scripts).
On the other hand when a user requests a webpage by clicking on a link, only the relevant part of the page is requested and then inserted in the correct place, and other elements of the webpage remain untouched.
By inserting in the correct place I mean creating a View once a particular route is reached. The view is then initialized and calls its render method to fetch the relevant part of the webpage and inserts it into DOM using $el.html(content).
But I do not want to call the view's render method when a webpage was fetched directly from the server, because all needed content has already been rendered, and re-rendering it only causes some ui-flickering effects.
Is there some common way to let Views know that they shouldn't render themselves, because the fully rendered webpage has been fetched from the server?
I could pass a flag like clientSideNavigation = true to the router, everytime a link is clicked, which then will be passed to views by the router so that they know whether to render the content or not.
But it does not work when user uses aa back/foward buttons.
I could also check in a view if within its $el there is some particular element that should be present on this webpage - for instance if I had a view called CatsView I could check if #cats-box is within its $el element. But it involves some more DOM manipulations, which I would prefer to avoid.
Have a root view and have place holder for child views. First time render the complete page from the server.
For rendering parts of the view on link clicks, you can define corresponding events hash on the root view.
Let the event handler callbacks call a controller(custom js object) which does the job of loading the data ,constructing the view and passing the data to it.
Finally also update the url with Router navigate(http://backbonejs.org/#Router-navigate) method with {trigger:false} to the corresponding url, so then when refresh is hit, the user comes back to the same view.
In the router callback for the specified url call the same method on controller object by passing a flag so that the functionality is in sync and also using the flag you can prevent calling router navigate method since its not required.

Categories