Context: Working through the Odin Project and finishing a "ToDo List" application. Trying to implement a functionality where the user will store data locally and be able to re-load data when the app is reloaded.
What I expect: I added 2 functions: saveToLocalStorage and getFromLocalStorage and expect any projects that I create to automatically reload when I refresh the page. They are stored in an object called "allProjects".
What happens instead: The first time a user creates projects, they populate as normal. However, when the page is reloaded, I'm not able to add anymore projects, AND the old projects don't populate the page. I know from console.log statements that the data is being loaded, and am parsing/stringifying the JSONS.
The really weird part: When I examine the allProjects variable in the chrome debugger (by hovering over the variable), I can see that it contains all the project objects I have been creating. However, watching that same object under "watch" it shows up as empty. And when I call it in updateProjectSidebar() as Projects.allProjects (because it is coming from a module), I hover over Projects.allProjects and it is empty there too. I figure this is probably why my sidebar won't render, since it sees nothing in that object to render.
A link to my whole code if you wish to see the whole thing in context.
I figured it out. It was a scope issue. The allProjects var was being returned before getFromLocalStorage() was run.
Related
I am experiencing one bizare problem with which you will probably not be able to help me, but I will try asking it anyway:
My Vue component does not want to update when it has specific name. When I rename it, it updates without problem.
To be precise, I named my Vue component Webinar.vue.
Here is the code for "Webinar.vue":
<template><div>test</div></template>
I display this component in browser in my Web application and it displays properly.
Now, I change test to test2 and save file and nothing happens.
But if I change the name of the component to be, for example, Webi.vue and do not change any content of the file nor anything anywhere else in the project, no config, nothing, it starts working. When I write test inside the div browser displays test, when I set test1 it displays test1 and so on.
When I change the name of the component back to the original name, update stops working again. And this is not the only name that does not work. I found a few other names that do not work, one of which is Webin.
How is this possible?
I know that you probably will not be able to help me since I did not provide minimal reproducable example, and if you ask me about the project, about the environment where is this running, I would say "it is complicated", so yea... But if one name works, just by changing the component name it should not stop working, right?
This is very bizare bug. I have very interesting environment... This component is nested within another component, that component is initialized from within the JSP file, there is Vue object created, JSP is rendered by Liferay, there is node.js involved, webpack and so on and so on. Very complex project with a lot of unusual stuff. Only way I can get this component to refresh when it has "bad name", is by restarting the node completely.
Vue in question is Vue 2.
But, how can changing the name of the component unbreak it. I do not get that.
I am trying to develop an application using javascript and to help organise my code, I am coding using objects. However, I don't really understand how the javascript engine is managing my object.
If in a first HTML page1 where I include a js file, I make an object obj1 when I switch to HTML page2 where I include both the old js script (already included in the first html page ) and the second js file where I want to use that object created in the first javascript file, it's undefined.
Can anyone help me understand how javascript manages objects and how, going from page to page, to get my object ?
When you load a new page (or even reload the current one), everything that was on the page you are leaving is destroyed.
If you want to make an object persistent, consider using localStorage to save the information you need.
I'm making a mobile app using Cordova and AngularJS. Currently I have installed ui-router for routing but I'm open to any other alternative for routing.
My desire: I want to cache certain views bound with parameters. In other words I want to cache paths (or pages).
Example situation: let's say that we see some dashboard page, click on some book cover which redirects to the path book/2. This path is being loaded for the first time into app. Router redirects from HomeController to BooksController (whatever the name). Now the BooksController loads data for given $stateParams (book id = 2) and creates view filled with info about chosen book.
What I want in this situation:
I go back to the dashboard page - it is already loaded (cached?)
I choose book #2 again
Controller or router notices that data about this book is already loaded
The view isn't being recreated, instead it's being fetched from cache
Actually, it would be best to cache everything what I visit based on path. Preloading would be cool too.
Reason: performance. When I open some list of books then I want it to show fast. When view is being created every time, then animation of page change looks awful (it's not smooth).
Any help would be appreciated.
EDIT:
First of all, since I believe it's a common problem for many mobile HTML app programmers, I'd like to precise some information:
I'm not looking for hacks but a clear solution if possible.
Data in the views uses AngularJS, so YES, there are things like ng-bind, ng-repeat and so on.
Caching is needed for both data and DOM elements. As far as I know, browser's layout operation is not as expensive as recreating whole DOM tree. And repaint is not what we can omit.
Having separate controllers is a natural thing. Since I could leave without it I cannot imagine how it would work anyway.
I've got some semi-solutions but I'm gonna be strict about my desire.
Solution 1.
Put all views into one file (I may do it using gulp builder) and use ng-show. That's the simplest solution and I don't believe that anyone knowing AngularJS would not think about it.
A nice trick (from #DmitriZaitsev) is to create a helper function to show/hide element based on current location path.
Advantages:
It's easy.
KIND OF preload feature.
Disadvantages:
all views have to be in a single file. Don't ask why it's not convenient.
Since it's all about mobile devices, sometimes I'd like to "clear" memory. The only way I can think of is to remove those children from DOM. Dirty but ok.
I cannot easily cache /book/2 and /book/3 at the same time. I would have to dynamically create DOM children on top of some templates for each view bound with parameters.
Solution 2.
Use Sticky States AND Future States from ui-router-extras which is awesome.
Advantages:
Separated views.
Very clear usage, very simple since it's just a plugin for ui-router.
Can create dynamic substates. So it would be possible to cache book1, book2 but I'm not sure about book/1 and book/2
Disadvantages:
Again, I'm not sure but I didn't found an example with caching a pair/tuple (view, parameters). Other than that it looks cool.
This is precisely the problem I had to solve for my site 33hotels.com. You can check it and play with the tabs "Filter" and "Filter List" (corresponding to different Routes), and see that the View is updated instantly without any delay!
How did I do it? The idea is surprisingly simple - get rid of the Router!
Why? Because the way the Router works is it re-compiles the View upon every single Route change. Yes, Angular does cache the Template but not the compiled View populated with data. Even if data do not change! As the result, when I used the Router in the past, the switch always felt sluggish and non-reactive. Every time I could notice annoying delay, it was a fraction of second but still noticeable.
Now the solution I used? Don't re-compile your Views! Keep them inside your DOM at all times! Then use ng-hide/ng-show to hide/show them depending on the routes:
<div ng-show="routeIs('/dashboard')">
<-- Your template for Dashboard -->
</div>
<div ng-show="routeIs('/book')">
<-- Your template for Book -->
</div>
Then create a function routeIs(string) inside your Controller to test if $location.path() matches string, or begins with string as I am using it. That way I still get my View for all pathes like /book/2. Here is the function I am using:
$scope.routeBegins = function () {
return _.some(arguments, function (string) {
return 0 === $location.path().indexOf(string);
});
};
So no need to be smart with caching - just keep it in the DOM. It will cache your Views for you!
And the best part is - whenever your data is changed, Angular will instantly update all the Views inside your DOM, even the hidden ones!
Why is this awesome? Because, as user, I don't have to wait for all the parsing and compiling at the moment I want to see the result. I want to click the tab and see my results immediately! Why should the site wait for me to click it and then begin all the re-compiling as I am waiting? Especially when this could be easily done before, during the time my computer is idle.
Is there any downside? The only real one I can think of is loading memory with more DOM elements. However, this actual byte size of my views is negligible, comparing e.g. with all JS, CSS and images.
Another possible but avoidable downside is the re-compilation cost of the hidden views. This is where you can get smart and avoid computation-heavy parts depending on the current routes.
Also, you are not re-compiling the whole View, just the parts affected by data changes, which also lowers computational cost.
I find it quite remarkable that everyone is using Routes and seems to be completely unaware (or ignorant) of this problem.
1) About static pages in the app (views), angular takes care of loading them.
for example: for your dashboard page you need not worry about caching the page, as angular will take care of it. Angular will only load the dashboard view once and on all next requests for the dashboard view, angular will just show you the view(not load the file for view), if it is all a static view without any data loaded by ajax calls.
2) if your dashboard is itself loading the book list(or similar data) via ajax, then you can tell your controller to only load the data once and store it to localstorage and on subsequent requests to the dashboard page can only load the data from the localStorage.
3) similar approach can be used when your BooksController loads the data into a view. You can check in your BooksController if the request for a particular book is been previously made and if not your can store it to localstorage or database. and if the data was previously requested then you can load the same data from the storage without making a request to server.
Example situation:
say user makes request for book1, then
your controller i.e BooksController check whether the same data was requested before,
if not, you can load the data via the ajax call from server and also save it to local storage.
if it was loaded before you will load the data stored in the localstorage or in the database.
If you're using ui.router, then you should take a look at ui.router extras, specifically the sticky states module. This allows you to cache the state 'tree' (including rendered views) so they don't have to be compiled or re-rendered on state changes.
http://christopherthielen.github.io/ui-router-extras/
Here's a demo:
http://christopherthielen.github.io/ui-router-extras/example/sticky/#/
I have a webapp that consists of several pages and a main page. When developing this webapp in Meteor, I segregated the pages into templates. The webapp shall display different pages for a period of time, meaning that Page A shall be for 60 seconds, then proceed with Page B for maybe 75 seconds and so on.
In meteor I construct a main page that consists of header and footer and a changeable templateholder. So basically the main page looks like this:
<template name='main'>
{{>header}}
{{>templateHolder}}
{{>footer}}
</template>
and the Pages are translated into templates, i.e. templateA etc. These templates shall replace the templateHolder based on an update on Session object, which also based on some timing (in seconds) that will be executed by using setTimeout JS function.
Everything works, however I noticed that the timing of each Page goes haywire. When I tested the template individually, they work fine. I suspect that the asynch call of setTimeout somehow conflicting each other.
Here is the JS code that changes the template periodically.
Template.main.templateHolder = function(){
var appIndex = Session.get('currentAppIndex');
switch(appIndex){
case 'A':
return Template['templateA'];
} //....and so on... with other templates
}
Template.main.created = function() {
//Query each pages display time and load it into sessions
// etc...........
Session.set('currentAppIndex',0); //Initialize the first page
setTimeout(nextPage,0);
}
function nextPage() {
//Bunch of line of codes that retrieve time param from settings and calculate
//Also some simple alogrithm to get next templates.. etc
//Update the session index object so that it reactively updates the templateHolder
setTimeout(nextPage,currPageDisplayTime); //currPageDisplayTime is the pages time of display in milliseconds.
}
I am not sure if my way is correct but it managed to display the templates and change them. The only concerns is the timing does not work properly. What is the best way to change template dynamically? Is this prone to any bug in the future?
I have found the reason of this buggy behavior. How do I troubleshoot them?
I put JS alert whenever timeout occurs in templates.
Also, alert whenever a session object is updated.
The flow of the templates rendering should be like this template A (60 secs) --> template B (75secs)--> template A (which is a looping). I noticed that during displaying template B, the alert that I put in template A fires! That means that eventhough only one template is being shown at a time, the created template continues to live healthy behind the scene. It still continues the process whatever it is designated to do.
This made me realize that if both of the templates exist at the same time, I cannot use the same session objects as they will both updating the same things. Turned out that I standardized the use of the session objects across the templates; for example i use Session.set('itemIndex',index) to iterate through the collection in each template, but since the templates are accidentally using the same object, they both update the data at the same time.
So the JS setTimeout works as intended. The problem is the shared session objects.
TL;DR templates don't get destroyed when it is not displayed/changed. This can be avoided by destroying it manually or using different objects.
P/S: Still looking on how to destroy template after created.
I'm trying to load and parse json data from an external source into a table via Knockout JS. So far, everything has been successful through the following code:
// Snippet
var self = this;
self.notices = ko.observableArray([]);
self.currentTab = ko.observable(5);
ko.computed(function() {
$.getJSON('http://json.source.here.com/tab/'+ko.toJS(self.currentTab), function(threads) {
if (threads !== null) {
self.notices(threads);
} else {
self.notices([]);
}
});
}, self.notices);
When a user clicks on a certain tab it would load the json data (forum threads) based on the selected tab value (self.currentTab) onto the table in the form of rows (self.notices).
Everything works as expected however, I noticed while browsing around other pages that do not have the above bindings, the json is still being loaded ($.getJSON is fired). I'm concerned that this may have some detrimental effects on the performance of my website as it is loading the json source even though it is not needed.
EDIT: I figured this out through Google Chrome's developer console.
I currently have my view model in a JavaScript file that is being used by every other pages as well. It consists of bindings for all the pages.
My question is, how can I load the json data on a specific page or only when the bindings are present - lazy loading? Preferably, I would like to keep all the bindings in a single JavaScript file, I do not want to separate them out and load them on a per page basis.
Here is an article that I wrote on a simliar topic a little while back: http://www.knockmeout.net/2011/06/lazy-loading-observable-in-knockoutjs.html
In your case, I think that you really want to add some guards around the $.getJSON call to ensure that it is only making AJAX requests when you are in the appropriate state (on the appropriate tab).
Along with that, the blog post describes using the deferEvaluation flag on a computed observable to ensure that the logic does not run until someone binds against the computed observable (in your case, you have an anonymous computed observable, but you could add it to your view model as a property and bind against it in your view. Without this flag, the evaluation code will run when you create the computed observable, which is not desirable in your case.