jquery mobile - PhoneGap development roadblock: framework questions and opinions for a small CRM -

i'm trying achieve relatively easy goal: create simple cross-platform crm app manage contacts/customers , relations companies. @ current state i'm confused on how approach (after motivational success).

after half year of objective-c , ios development under belt wanted more serious , start on real app project, mentioned crm app. heard phonegap, tried out , impressed. there on clear me app should cross-platform.

to have better understanding of i'm trying achieve, here details "requirements":

• simple data model, 5 or 6 entities total. one-to-many , many-to-many relationships.
• have tab-bar widget toggle between companies, clients, etc.
• search-as-you-type on listviews
• master-detail view behavior listviews
• back buttons on header, "add/edit" buttons well. classical app layout expect.

my first steps lead me jquery mobile ui which, @ first glance, looked perfect candidate build ui fits requirements , takes off lot of coding hands. mockup created worked great on devices, hit roadblock: master=detail view navigation/routing. had no clue how it's supposed work , jquery mobile docs don't supply answer or best-practice that. figured out might able pass "id" in querystring , read on details view. worked extent, when page in external file (detailsview.html?id=3) , not internal 1 (#detailsview?id=3). , experienced odd behavior when reading value querystring on pageshow event. anyway, tinkering logic , design led me clue there must better , more organized approach, mvc. , apparently there is, namely backbone.js , angular.js (and ember.js etc.) come decent deep-linking. googling told me angular.js might better fit me since comes 2-way data-binding , makes me write less code, appreciated.

but there's problem of functional overlap between jquery mobile , angular.js since jquery mobile has it's own routing capabilities. disable part guess, lose page transitions in process (no more "pages" in index.html)? found topcoat alternative ui lacks needed/wanted tab-bar widget seems. twitter bootstrap seems lack well.

and haven't touched persistent storage yet! phonegap api provides storage capabilities after years nice orm implementations hibernate, entity framework , core data want more "natural" pure sql. on other hand, pure sql might doable since scope of project limited. came across jaydata have't tried yet. since angular.js seems prefer data input in json format, maybe lawnchair.js might idea? looked couldn't find out how reference relations and/or objects in traditional way. learning curve aside, lawnchair.js way @ store relational data? or couchdb server perspective? of examples found stored non-related data or contained arrays not referencing other objects. guess needs storing object identifiers in arrays, how auto-create, auto-increment them , make sure they're unique?

i appreciate thoughts, comments , little guidance on :)!

thanks lot!

during last weeks playing around bunch of storage , ui solutions, ones settled lawnchair.js, jquery mobile , other things handlebars.js templating. simple use , needed.

to store jsons created lawnchairs this:

var clients = new lawnchair({ name: 'clients' }, function (store) { // don't need callback here }); 

lawnchair's json based storage makes simple , intuitive store data directly in javascript code single line:

clients.save({firstname: "jason", lastname: "bourne", ...}); 

this automagically create unique key access object later. big bonus wasn't mentioned anywhere! create , define own key, purpose auto-generated 1 fits perfect.

to create realtionships other lawnchairs, "companies", add key querystring, read on detailspage, , add key company's property want, like:

myjsonclient = clients.get(superlongautogeneratedkeyreadfromauerystring);  // stuff object  // add key current company object currentcompany.bestcustomer = myjsonclient.key;  // save companies.save(currentcompany); 

that's there :)!