I have a question about the architecture of a backbone.js web app. Let's say you are creating a movie collection webapp. You would use a Model for a movie and a Collection for your collection of movies.
The view for the collection is basically a load of li's.
In order to make the webpages indexable by google you would allow it to work without javascript and get rendered on the server side. So that going to mydomain.com/12 would on the server side build up the html li elements for that collection.
If you then wanted to use backbone.js to modify the collection, you would need to load the data into backbone. What is the best way to do this? Two ways I can think of doing this is...
1) use jquery to iterate over the li elements reading the data into backbone - the problem with this is that the html probably only contains the movie names, and not the movie id's /director information that might be needed in the backbone model. I suppose that data could be included in the html and hidden using css.
2)throw away everything in the list and reload it from the server using ajax - which to me seems like a waste since all the data could have been sent on the first page load.
Are either of these methods good practice? If not, how should it be done?
Jeremy Ashkenas, author of Backbone, recommends that you print the model data as JSON in the page, and load it as an object:
<script>
Accounts.reset(<%= #accounts.to_json %>);
Projects.reset(<%= #projects.to_json(:collaborators => true) %>);
</script>
See Backbone FAQ - Loading Bootstrapped Models.
Related
Scenario:
When user requests the page, some information is fetched from Database and needs to be populated in AngularJs Model (properties) on Page Load.
My AngularJS reside in a separate JS file and the fetched information(in JSON format) can only be rendered in view.
How can I load the fetched JSON information in AngualarJs properties. The values needs to be updated as soon as page is rendered, so I was considering Constructor; but don't know any way to accomplish it.
I create a method, say '$scope.loadConstructor()' and called it in my AngularJs code.
Hi I am new to AngularJS. I have great web app already running with JQuery and jQuery UI.
Now I want to completely get rid of JQuery and am going to migrate to Angularjs because of its MVC (MVW) pattern.
So my jQuery application is running with EJS for templates and entirely DOM manipulation. But when I think about Angular js, I have doubts. Can I still use EJS or not?
So please guide me whether I can use or not.
Another doubt is, let's assume I have list page. It is updated dynamically, and it will display 10 records first then based on user scroll, the next 10 records will be appended in the DOM after AJAX. Can we append to the DOM dynamically using Angular?
How do I achieve these kind of things in Angular?
You can use EJS (server or client side) in combination with Angular but there's no need and you'll probably overcomplicate things. AngularJS is very capable for manipulating the DOM by itself in a very separation of concerns kind of way. The most elegant way to work with Angular is to have a RESTful backend and just serve some static html/js files from a webserver.
As for endless scrolling, there are tons of ready to use plugins (modules) to choose from or you can write your own. Basically this will need a view with a ng-repeat directive to display the currently loaded items and a directive that will notify a controller/scope to load more items when the user is scrolling down.
A nice simple article can be found here.
Similar questions:
Mixing angular and asp.net mvc webapi
Actual use of jade template and angularjs
Yes of course you can use EJS with Angular JS. You might want to have a look at this;
https://gist.github.com/jrmoran/4277025
And about your DOM manipulation question. Yes you can append DOM dynamically using Angular JS. Angular JS have a strong feature of two way data binding which dynamically updates its DOM content when a model variable changes.
Have a look at this:
http://docs.angularjs.org/guide/databinding
Is the combination of technological ASP.NET-MVC4, and AngularJs work well?
About the needs of my app: most of the work of my application view pages with tables of information.
I need to have an easy option to identify each point in the tables on the client side, highlight it, paint it, and request additional information from the server about it.
ASP.NET MVC and Angular.js have nothing in common.
Short answer is yes - they work well together.
You would simply make all your Actions respond with JSON rather than HTML (unless you want HTML in some scenarios)
i.e you write your HTML template, angular controller, etc on the client, and have an Action to grab all the table records as JSON, then load that in your angular controller to populate the table, interact with it all on the client, and send any changes back to the server.
You could replace Angular with any client-side technology if you wanted. Backbone, Knockout, etc.
I'm currently working on a complex single page web app. It's something like a charting program: you can select or add objects on a white page. There's many types of objects. If you select some of type A objects, then it will add/remove B/C/D objects based on a complex logic. I'm currently using Backbone.Model for these objects. And Backbone.View for displaying. It's a pretty standard MVC structure, with models for objects data, controllers for managing models and views, and views for displaying. It's all using DOM elements. The views are added, removed or updated (with CSS) based on model data.
It works great and now I'm trying to add server side to save and load all data to/from the server. I planned to write a REST API server with restify for all the models.
Then I find meteor.js, the 'realtime', 'reactivity' and 'database everywhere' features intrigue me. So it will greatly simplify my app if I can save and load my models directly and let meteor to do the sync. And the real time feature can be a great plus for my future features, such as adding realtime collaboration.
But it seems meteor has a very different idea from Backbone on how a web app is structured. How can I combine meteor with my current Backbone code? Do you have any great suggestions?
Thanks.
Uh, don't. Do meteor all the way, or do backbone, but meteor is pretty much a combined full-stack solution not really intended for use with something like backbone. Meteor already provides deeply-integrated components that address all the areas that backbone addresses (data sync, DOM updates, etc).
I have a backbone app (a blog) displaying different articles we can share on many platforms.
I try to use open graph with google and facebook, i update the properties in the router just before rendering the view.
But the thing is, when the scraper reach the app, it doesn't get the meta properties, i don't know if it doesn't execute javascript or if it's too fast, but if i set up some default meta properties directly in my single page it works.
However i need to update the meta properties about the url (each article has their own meta properties).
So, is it possible to use open graph with backbone.js ?
I am struggling with the problem and it seems Facebook is not running javascript in their end. There is no way, but creating separate page in your server for stuff you want to share on Facebook and include all meta tags statically in those pages.
There are services that will render javascript generated page for SEO purposes. Check out https://prerender.io
An alternative is to have your server populate the <meta> tags before the page is served.