I have a problem that seems pretty specific to my plugin but I don't know enough about backbone.js to solve.
Pretext:
My plugin injects some DOM elements to control its features and script elements to interface with the page and send events to my plugin's backend.
The Problem: Backbone does some sort of cleaning of the page and removes all of my elements but leaves the original page alone. I know this is backbone because I traced the remove event to part of backbones script. I also know its not plug.dj because they have no reference in their code to anything that could detect my elements. I need to know how to prevent backbone.js from removing my elements or find a way to detect when backbone is done culling the page so I can inject at that time.
If anyone knows of a flag I can put on the elements to prevent this from happening or some sort of flag that tells me backbone is finished, it would be greatly appreciated.
My plugins code is available here: https://github.com/tyduptyler13/PlugPlus/tree/dev (Keep in mind its the dev branch! Master branch is the last stable version, the dev has some new beta features I was testing.)
This code is the most up to date version available to the public and all versions have this issue after plug.dj made the change to backbone.js.
For plug.dj code you will need to dig manually on their site http://plug.dj/
And finally, to test their site with my code you will need to add it from the chrome store.
I ended up ignoring the fact that backbone was culling my content by doing an interval based check to see if backbone was finished "rendering" the page. If you add content after backbone has finished it won't overwrite it or remove it.
Related
i am working on the single page web application using angularJs.In My application when i go to each and every page cpu memory increased consistentely.I try with $destroy , Remove console and unbind the window event.but till i get the same error.How to resolve it?
you probably got some leak and its not related to angularjs.
$destroy is the right event to clean things up like window/document level bindings as you wrote, but you probably have other issues.
look in chrome profilers tab in the developer tools. it has ability to record what actions took most cpu, where memory is at and so on... very good tool.
you could use that to compare to runs of the same navigation to see what was added to the second run compared to the first.
I'm attempting to write some UI tests for a RequireJS-based Backbone application, utilizing FluentAutomation.SeleniumWebDriver and NUnit. The HTML page in question contains a typical data-main attribute for loading the RequireJS module for the application. My struggle is in properly detecting when the application is fully loaded with these tools; the only thing I've gotten to work consistently so far is using an explicit wait in seconds, like so:
I.Open("http://myapp")
.Wait(5)
.Enter("foo").In("input[name=username]")
.Enter("bar").In("input[name=password]")
.Click("button")
.Wait(5)
.Expect.Text("Welcome").In("#welcome");
This is less than ideal -- my test as written above will always take at least 10 seconds to run, when in reality the app might be "ready" much faster than that. What I'd like to be able to do is something like this:
I.Open("http://myapp")
.WaitUntil(() => I.Assert.Exists("input[name=username]"))
.Enter("foo").In("input[name=username]")
.Enter("bar").In("input[name=password]")
.Click("button")
.WaitUntil(() => I.Assert.Exists("#welcome"))
.Expect.Text("Welcome").In("#welcome");
However, this doesn't work -- using WaitUntil here actually seems to prevent the app from loading, for reasons unclear to me, as I simply receive timeout exceptions after the default wait period (30 seconds), stating that it was unable to locate the element in question within that timeframe.
I see that Selenium 2 provides a WebDriverWait for this kind of scenario, and possibly that would work here, but am unsure how I would use this within FluentAutomation (and a quick search of the FluentAutomation code on GitHub doesn't seem to indicate it's in use within the library).
What can I use in FluentAutomation to properly wait for a RequireJS module (or DOM loaded by it) to be ready?
Additional details:
This might not be a RequireJS compatibility problem at all. I've looked further into the app and found that what's happening after the Click("button") is actually a window.location.replace -- not a RequireJS async module load. It's the one place in the app that this is occurring, apparently. So, is a window.location redirect a known scenario that would cause problems with WaitUntil, and is there an alternate approach (aside from a simple Wait(5)) that would properly handle this?
I'm thinking of moving my site to angularjs, and I want to start very small, by moving all my static server-side plain-text templating from django to angular (otherwise there will be syntax trouble with the '{{}}').
It seems that the best way to do that will be one of two options:
To have an ajax call that returns a JSON with all the texts of my site. The texts will be stored in a variable which is binded to my HTML elements so angular will update everything.
To store a static js file with the dictionary and include it in my HTML and bind the dictionary with angularjs.
Both options will allow me to switch between languages without reloading the page.
Which one is better? In general, is this a good approach or is there a more correct way?
I tried out a few different options, including Angular Translate, but I liked Angular-gettext the best so far.
One thing that helped tremendously is that there's a working demo for it where they i18n TodoMVC, called angular-gettext-example.
The workflow is simple:
Add the "translate" directive to your templates
Run grunt to extract .pot template(s)
Hand off the .pot to your translation vendor or DIY with POEdit or similar software
Drop the .po translation files back into your project
Run grunt to compile the .po files
Set the default language in your scope
Watch the magic!
I'm sure the other solutions posted here are good as well but I haven't seen an end-to-end example so nicely organized as angular-gettext-example.
Cheers,
JD
First of all, there is a way to change angular's delimiters to other symbols as answered here: Angular JS custom delimiter
The 2. option is easier. You include it once and you have all translations on page load. No async calls, no promises, nice and easy.
And yet i'd go with the first one. Services like $translate would really make your life easier following option 1. Plus it has many options for loading and storing loaded data in LocalStorage and cookies, so there's plenty of space for extension and customization. You can then translate your content with $translate service, directive or filter.
And don't forget that 2 option disables any options of cached requests. On each request to your start page the server has to read static file and include it in the html. With first option the user's browser can cache .json for as long as you like.
AngularJS supports il8n/L10n for currency, date and numbers filters only. According to this book:
(sorry for the low quality! cell phone camera)
I would say follow the first approach and load the translation dynamically. It would involve a lot of work but there's no other way around
Have a look at angular-translate :)
It solves both scenarios!
I make extensive use of the file.saveURL feature of trigger.io but I would like to know if its possible or maybe possible to add this functionality but to run a command to remove all stored items?
The app I am creating is customizable by the user and because of that they have the ability to "leave" the app in a since.
Doing so will clear out all localstorage and any downloaded items.
Currently I have a method that stores each reference in a localstorage and when I "leave" I loop over the items in the LC and remove each item. While this seems to work ok it does have querks at times. I'm just curious if it may be possible to add a simple remove all type function to the file save?
Seeing as we are responsible to the cleanup of these items it would be nice to simply remove all stored items
Currently, no - we don't save those files in a separate folder, which could have been cleared up in one go...
It's a change we could make in the future though if it proves a popular update to the file module!
I have read the AngularJS documentation doc page but I am still not clear on what exactly happens. How does the compiler run? I mean is the compiler a piece of Javascript that is triggered on page load to run and inspect the DOM. If that is the case then is there much overhead every time the page is loaded?
I also have read that you should never change the DOM inside your controller. Why is that and could someone give me a simple example of what I should not do.
You should do a walkthrough of the mobile phone tutorial on the site. The directions are clear and it will show you how to set up your app and where the proper code should be. As Arun said, DOM manipulation should be handled mainly in your directives. Controllers handle the logic, the template handles data binding and incorporates directives to accomplish DOM manipulation. As you work through the tutorial, you will start to see Angular as a different way of thinking.
As far as compilation goes, the index.html page is rendered, the scripts are then loaded, and then Angular gets to work looking for the attributes to include the view template based on the routing and controllers. The template is then parsed with variables bound and watched, and then displayed to the user. Of course, there is a slight delay, as you can see on http://builtwith.angularjs.org/ . On the top right, you see "75 neat things built with AngularJS". If you refresh the page, you notice 75 is replaced with a ? until the page loads (less than a second later). Honestly, unless your controllers and views are incredibly complex, rendering time will never be very long at all. Personal example, I am generating a reports page with 12 columns of data 144 rows long, by parsing and looping through a JSON object multiple times and running calculations and creating a new object, all in the controller when the template is called. The page appears blank for about a quarter of a second before the data appears, templated, formatted, and with the appropriate callbacks.
Again, try it out, see for yourself.