I have a backbone.js / jquery mobile app:
when i make a GET to mydomain.com/#map, then jquery executes "/" and then loads #map.
because "/" is triggered first, all backbone.js scripts are loaded including the backbone.js routes in my map-controller.js ("map": "functionForMapRoute").
since the URL contains /#map, the backbone.js route "map" gets triggered before jquery mobile has rendered the dom.
so "functionForMapRoute" can´t operate on divs cause the DOM isn´t fully loaded at this point.
how can i ensure, that the "map" route is triggered not until the DOM is fully loaded?
use something more integrated with jquery mobile, for instance jquerymobile-router (you can find it on github). It replaces backbone's router and it's to be used with jquery mobile and backbone.js or spine.js
I figured out that if you dont use "/" in backbone router it will do fine.
e.g.:
use
"category-:id": "category"
instead of this
"category/id/:id": "category"
I guess thats why they used same concept in the official tutorial :P
http://jquerymobile.com/test/docs/pages/Backbone-Require/js/routers/mobileRouter.js
"category?:type": "category"
I had the same issue, and here is the solution to avoid using jquerymobile-router : Backbone.js and jQueryMobile routing without hack or other router
Related
Above is just some test code for me to learn how to program with backbone and jqm.
Initially, I think it's always better to start running my code when the document is ready, so I wrap backbone view creation logic in the document ready function: $(function(){ }). But the page is just not showing like a mobile app.
So I tried and tried, and I found when I remove the document ready function part, the page will be displayed correctly, exactly like a mobile app.
What's wrong with document ready function here?
Please help.
I guess that you are applying some Backbone manipulation for elements like #homepage which is trying to manipulate by JQM too. That's why you don't have any problem if you remove the document ready function. You can do this Backbone code inside JQM page event functions.
JQM page events. So the other code works after the pages are rendered by JQM.
I wanted to use jQuery Mobile for an app with Ember framework, but it seems that jquery mobile is modifying the URL of ember ?
For example, I have this basic url from ember :
=> localhost/Marco/Dev/Project1/#/home
It will automatically modify the url like that :
=> localhost/home
and this is causing me some issue with a lot of thing, and I was wondering if it was possible to disable this thing on Jquery mobile ?
Thanks
Use jquery mobile custom builder and uncheck all related to url based components like Navigate in events etc.
http://jquerymobile.com/download-builder/
I'm only using Angular.dart on part of my page...The rest contains another Dart app (compiled down to JS...everything is in JS from Dart) and some other HTML, etc. Essentially my Angular.dart app is just a component within the page.
However, now all links on the page seem to want to go through Angular.dart routing. I don't even need routing (though have a few defined) technically.
Is there a way to disable the routing altogether? So that when clicking on Another page actually works like normal, changing the URL in the address bar? Right now it's just going to # and all my links are disabled. I wasn't even using ng-click or anything like that either.
How can I make Angular.dart just leave those links alone?
Thanks.
Since route_hierarchical-0.4.19 you can simply add a target="_self" to your <a href="...."> to avoid angular router.
You can reduce the scope of Angular in your page by putting ng-app on the element where Angular.dart is used. Thus, the links outside of this element will work.
link
<div ng-app>
link
</div>
For links inside Angular part there's perhaps a native way to handle them but you can add a directive that handle onClick on the element and performs window.location.assign('link').
This is my first question on SO so i'll try and make it as clear and as understandable as possible.
I've recently started messing around with Angular JS and currently I am working on a mobile app using Angular JS and jQuery Mobile. So far I've not had any major problems and so far have no had a need to consider any external libraries for integration (such as the angular js + jquery mobile adapter). I've created a multi-page app (currently only two pages) and used separate controllers for each page (login + content page). The app itself is simple, it's just a list keeping app and i've created a quick jsfiddle based on the ui aspect of the content page: http://jsfiddle.net/G7JNV/4/
The app works as expected from the jsfiddle. However because the content page is a page in the same html document (index.html) as the login page, to navigate to the content page the url becomes:
.../index.html#mainpage
(mainpage being the page for the list keeper)
Thats when things start getting funny. When the url is like above, when adding an item to the list, the item is initially unstyled (it doesn't look like it's part of the list) but the css styling for that item comes back after adding another item. Of course the next item is then unstyled (and so on).
If you want to see what the issue looks like:
Everything however works fine if i don't have the hash page as part of the URL (I tested this by turning the two page app into just one page for the content so that .../index.html goes straight to the content page). The css is applied to the dynamic content fine as one would expect.
Of course I have no idea why it's doing this and I suspect that it's something to do with how angular and jqm treat the hash anchor in the URL (but bare in mind I don't have much experience in both Angular JS nor jQuery Mobile).
Any help from any of the more experienced Angular JS (and jQuery Mobile) users would be greatly appreciated!
You should be creating a directive that encapsulates the list and the logic that you have for it.
As suggested in the comments to your questions, a timeout can work. If you're having issues with the element "flashing" or "flickering", you can use the ngCloak directive to deal with this.
You may also want to check out the $locationProvider configuration in your app and turn off HTML5 mode or set the hash prefix.
I wish to implement angularjs with jquery mobile all works fine except that the jquery mobile css is not applied.
It works when I don't use routing in angularjs but with routing, the css stops working.
What do I do? I also included the jquery-mobile-angular-adapter still it's not working.
"if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup." - http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html
To solve this problem you have to tell JQuery to initialize all plugins after Angular loads the content, you can do this in your controller.
$scope.$on('$viewContentLoaded', function() {
$(document).trigger('create'); //$(document) or just the part that was loaded with ajax
});
I don't know jquery-mobile-angular-adapter, so I can't help with that.