I've been reading tons of tutorials, I really like this technology, but I am missing something.
Following this tutorial http://www.youtube.com/watch?v=FZSjvWtUxYk you get JSON data from this url, http://backbonejs-beginner.herokuapp.com/users then you set your model, and collection.
I am not sure how to set this url on my own (for either local storage or database storage), I obviously need to set it to where I can GET the data or PUT/POST/DELETE data. I need to mention that I dont want to use PHP to send the data to the database, because this is a cordova app. Maybe setting data is beyond just using a URL, hopefully some one can make this clear, this should be easy points for most.
I am missing something easy here, because there is a reason they are not covering this topic extensively (maybe they are and I am overlooking it), but oh well ill ask anyways maybe someone can point this out :)
Here is the ajaxPrefilter it kind of confuses me, I know it obviously prefilters our url to point to the data, but I am not sure how to apply an appropiate url for local storage/server side.
$.ajaxPrefilter( function( options, originalOptions, jqXHR ) {
options.url = 'http://backbonejs-beginner.herokuapp.com' + options.url;
});
Edit: Also I noticed that when I run a POST request, this url changes http://backbonejs-beginner.herokuapp.com/users and adds my data, this is from the RESTful services right, and what is so special about that url that it allows me to do that? In the meantime I am going to keep rewatching the backbone tutorial videos, to see what I am missing lol.
Also watching this http://net.tutsplus.com/tutorials/javascript-ajax/understanding-backbone-js-and-the-server/ starting from the beginning he actually understands what I mean, but jeffery uses PHP, which maybe I can use with cordova (pointing to a script or something) but I would rather use javascript to send data to mysql and local storage.
EDIT: Okay I see heroku is a cloud based service https://www.heroku.com/ so inside that url we were using a dummy type of service to store the data.. Okay so now how do I point the url to local storage?
Finally got it!
I came across this Backbone.js + Java Wine Cellar Application. It is an application with a Backbone front end and a Java backend. You have just to download it, set up the environment and see how it works.
There is also a tutorial, the author wrote it also in PHP, just check his blog.
Okay, so I am a noob, I am sure the way I asked this question may have gotten confusing but here is what I did.
I spent a good amount of time figuring out how to use https://github.com/jeromegn/Backbone.localStorage what I learned is, models and collections are well models and collections of data. I didn't think of it like that(should have been transparent from the get go, but oh well) inside the model and collection you need some data and so from the tutorial I followed the method of getting data was via http://backbonejs-beginner.herokuapp.com/users it contained jSON data which we could work with.
So in using local storage, we need to change where our jSON data is by using localStorage: new Backbone.LocalStorage("choose-some-identifier"),
So understanding the model and collection really helps in knowing what to do. Now I just need to figure out how to add localstorage data to a server, and since I am using phonegap it would be cool to add an event listener for when the user connects to the internet and on that event submit the local storage data to the server.
Related
I was wondering of the best way to supply JSON data to my frontend. What I'd like to ask is maybe there are some better solutions of doing this which I'm missing out. Here are a couple of obvious thoughts of the top of my head:
1) Simply output JSON data in a template as a global JS variable and
pick it up later on when needed in some JS.
//a template
var json = echo json_encode($data);
//a JS
alert(json.message)
I don't really like this idea. For example, if the frontend is
written completely on JS, I would have to output all the data, even
if it's not really used by the user (I don't know which pages he
would like to visit so I load up data for all the pages). It could
hit performance and just many redundant JSON.
2) Create some JS data provider which requests necessary pices of
data from the server when the user really needs it. The provider also
caches the data it requests so it can instanly return the data
without requesting aything when the user goes back to some page after
visiting it.
What do you guys think? Could you recommend some better solution for
the problem or point out some improvements of the ideas? Thanks.
I would like to dynamically create a corresponding JSON file every time a new merchant signs up to my site.
For example:
Burger King signs up to be a merchant on my site. I add Burger king to my merchants.json file. How would I dynamically create a file that gets inserted into that JSON object that can later be used to pull up data specific to that merchant, on that merchants page. For example, a JSON file full of products or deals.
Is this even the right way to go about it?
Can someone point me in the right direction please?
This seems like a very common usage scenario but I don't see any examples online that explain this application structure thoroughly.
NOTE: I am using AngularJS
EDIT: Thanks for the tips guys, after asking around in the #AngularJS channel on IRC, I've been told to go the extra mile and create an API. I'll probably use sails.js to help with that. This obviously isn't how I was planning to do things, but as you guys pointed out, it wasn't the best practice; not by a long shot.
1) You'd need a small server-side PHP script that accepts the new JSON file sent by the client
2) Browser requests merchants.json from the server
3) Load it with JSON.parse()
4) Add the merchant to the Object
4) JSON.stringify(object)
5) Send back to the server.
Now, this is a horrible horrible idea. Use a server-side database for storing any kind of information on your clients -- MySQL, whatever. JSON is for transporting data, not storing it. You can write some PHP scripts to dynamically generate a page for your merchant based on the data in the database -- so much easier and so much more secure. The method above will expose the whole client database to the client, and based on your specifications above, I don't see another way.
I'm a relative newbie when it comes to coding, especially javascript. I currently am trying to populate a table from a google spreadsheet, which will update when the spreadsheet is.
I followed this tutorial word for word (basically all you need to do is replace the key with your own to specify your spreadsheet, and make sure its both published and public, which I've done)
http://dataforradicals.com/the-absurdly-illustrated-guide-to-sortable-searchable-online-data-tables/
I just get a bad request 400 error referring to my spreadsheet. If I visit the spreadsheet generated directly I just get the words...
"Invalid query parameter value for sq."
https://spreadsheets.google.com/feeds/list/1UcfO9GHePQrcixZB_R9uVXr1vHVqVTDg7DdsOjpm-K0/od6/public/values?alt=json-in-script&sq=&callback=Tabletop.callbacks.tt140241226993949106
I can visit my spreadsheet with the link I was given when I published it here..
[maximum links reached but the structure is different]
As you can see the domain structure is different. I fear that "Tabletop to Datatables" is adding an outdated url to the start of that link but can't find where it actually applies it.
The only reason I would think thats not happening is because the example in the tutorial still works! And the link it refers to is the old style URL too
I'm baffled, please help if you can. All suggestions appreciated
The query string includes a parameter without a value, &sq=.
https://spreadsheets.google.com/feeds/list/1UcfO9GHePQrcixZB_R9uVXr1vHVqVTDg7DdsOjpm-K0/od6/public/values?alt=json-in-script&sq=&callback=Tabletop.callbacks.tt140241226993949106
^^^^
Try this, with that parameter completely removed...
https://spreadsheets.google.com/feeds/list/1UcfO9GHePQrcixZB_R9uVXr1vHVqVTDg7DdsOjpm-K0/od6/public/values?alt=json-in-script&callback=Tabletop.callbacks.tt140241226993949106
There is an updated version of this project. Any necessary updates are included here:
https://github.com/scottpham/tabletop-to-datatables
Try with the updated versions of all js libraries.
Check the link and remove the extra string after pub. That part of link is not necessary and may cause issues.
According to google:
The 400 Bad Request error is an HTTP status code that means that the request you sent to the website server, often something simple like a request to load a web page, was somehow incorrect or corrupted and the server couldn't understand it.
Good luck
I am trying to understand localStorage, but still a bit confused as It seems only few lines of code do a lot in the background.
What do I need to do to POST model data to a mySQL DB using PHP?
It seems save() does everything for you but where do I setup the connection to the DB, user, password...etc?
Can someone point me in the right direction please?
Thanks!
First localStorage is a HTML5 API, and it saves locally; while php is on the server.
There's a great video by Jeffrey Way which explains how to set the routes, with use of Laravel as PHP Framework (but you can use anything).
If you're running Apache WebServer, or u can use emulateJSON() Backbone method, or u can set up mod dav to enable PUT and DELETE method.
If u choose to to emulateJSON, the PUT and DELETE HTTP methods will be interpreted as POST method when it goes to the server.
I hope i've been explicit enough. if not so, feel free to ask.
I read many Backbone.js tutorials, but most of them deal with static objects.
Of course, I have data on the server. I want a tutorial that shows how backbone.js can communicate with the server to fetch data, post data, etc.
This is .sync, right? I read the backbone.js documentation, but still fuzzy on how to use this feature.
Or can someone show me an example?
According to: http://documentcloud.github.com/backbone/#Sync
Backbone.sync is the function that Backbone calls every time it
attempts to read or save a model to the server.
But when? Where do I put the function? I don't know how to use it, and the documentation doesn't give any examples. When does the data get loaded into my models? I get to define when...right?
You never really have to look at .sync, unless you plan to overwrite it. For normal uses, you can simply call model.save() whenever you want and that will execute a post or put (depending on whether the record exists already). If you want to get the data from your backend, use collection.fetch()
You'll of course also need to specify a URL, do so through your collection attribute, collection.url
You can override Backbones native sync functionality if you override it:
Backbone.sync = function() {
//Your custom impl here
}
After that this function is called whenever you call a backbone function like .save() on models or .fetch() on collections. You do not have to care about data transport anymore.
I would suggest taking a look into Backbones source and look how the default sync function is implemented. Then create your own or adopt your server to support the native function.
They are not free, but the following screencasts both have a piece on backend work and how to send data to and get data from Backbone.
Tekpub is a 9 part screencast about asp.net MVC3, with the whole 6th part about using backbone to write an admin module to manage productions. it shows all about handling routing in MVC3 and sending & receiving data
Peepcode
http://peepcode.com/products/backbone-js about basic backbone stuff
http://peepcode.com/products/backbone-ii about interactivity
http://peepcode.com/products/backbone-iii about persistance (it's this third one you will need for server connection information).