Backbone.js Push state and page state after reload using Symfony - javascript

ive got a question. Im using backbone.js with push state and navigate to push url and execute actions. Im using symfony2 for backend. Now the question is how to handle the routes e.g. /reviews that are loaded via symfony routing, not backone. Is there any was to avoid code duplication?

If you only target is javascript-enabled clients, don't do anything on those routes - just show the same page for all the requests received by symphony.
If you want to support clients without javascript too, try to reuse your templates. You can use the underscore templates http://documentcloud.github.com/underscore/docs/underscore.html#section-120 (just change the delimiters to use {{ and {* and use Twig in symphony). Then, you should make sure you send the same data to the template from symphony and from Backbone. Basically, when you render a template, you send data in the same format as you do on the server.
var PostView = Backbone.View.extend({
render: function() {
$(this.el).html(this.template({post: this.model.toJSON()}));
// so you can use post.title post.description in the template
}
})

Related

How to connect laravel api with pure html website

Since I am new to laravel api, I don't know hot to connect laravel api to html endpoint. My laravel api is working well and html web pages also completely finish. I just want to connect them together... Please explain how to connect these two.
Thank you
I would suggest two ways to go about this but it all depends on what your API does. If you are looking to serve the HTML with Laravel and have some parts of the application loaded by Laravels view() method, you'd basically need to break your HTML into blade files in resources/view folder and call the blade files via view() in controller to load the desired page.
However if you are looking for a separation of view and API where API is called by the view only for some information, you'd need to utilize AJAX via JavaScript to make a call to the API endpoint and retrieve the data (JSON) for use in your HTML site.
I use axios a lot and here is a sample call:
axios.get(url).then(response => { // do whatever here with the response data });
I'm not sure I understand you. But it reads like you developed your Laravel Application (PHP) and HTML separately. Laravel uses Blade (see: https://laravel.com/docs/7.x/blade) as a template engine into which you can inject PHP objects. Basically, the call of a web page (more or less) works like this:
The user is calling the url
URL goes to the routes/web.php
in this file you can call e.g. a controller
the controller called via (e.g.)
return view('my.site.nice-site', [ key => value]);
blade starts and displays the page to the user with the given key as variable.
I hope this helps you a bit. Otherwise I recommend, just to get started, the documentation from Laravel or YouTube.

Is there a way to send data from HTML (using ejs template engine) to Node.js?

I am currently working on my self-project using Node.Js (Express) + MongoDB + Javascript/Jquery + HTML (using EJS as my template engine).
Currently I have some knowledge of sending data from Node.js router to Views and sending form data from Views back to router using "POST" and "GET" method.
I was wondering if there are other methods of sending a data from Views to Node.js router without going through
<form action="/" method="POST">
...
</form>
methods...
I have no knowledge on Angular2 and REACT..
For example, I am trying to send back the updated data from Views (probably using Jquery's editable() plugin to simply edit a text that was generated from MongoDB and send the updated contents back to server so I could update MongoDB
and save contents based on updated contents.
I feel like using a form should be only done once when I want to add new stuffs into DB...please help me out! Some of the stuffs I am asking are vague but these are the best I can explain. Or learning Angular2 is the best approach Lol ?
It sounds like you want to learn about $.ajax (if you're using Jquery) or XMLHttpRequest (if you aren't). That is significantly more versatile than forms (though you still should use a form to hold the entry fields; just don't give it an action if you're using a JavaScript-based AJAX call instead).
If updating an existing entry, you probably want the PUT method.

Converting Single Page Application to Multi Page website with node.js and backbone.js

I have build a website where the contents are being transferred dynamically, with nodejs and expressjs with jade template engine, on the back end providing the REST API and backbone.js managed with require.js, using the underscore templates on the front end.
Contents are like Questions and Answers OR a review post about a product. Currently i am sending all these content as JSON and the Front end receiving view of backbone.js has the necessary javascript and the correct underscore templates to render the final html on the page.
This is fine when these content are to be seen as a feed, which get dynamically loaded on scroll.
But i want to have an separate page for each of these posts, like a separate page for a Question and related answer and a separate page for a review. I want these pages to be efficiently indexed by Search Engines, so i want to transfer them as the finally generated HTML, rather than a require.js main entry with contents getting populated after a series of ajax call.
One way to solve this is by using the express.js views to build the html on the server side and then inject all the necessary javascript in it and send it. But i don't want to repeat my logic.
I there any way that i can re-use the code logic written in backbone.js for template rendering with supplied variables and injection of js, all this on the server side and then simple send the generated final html to the client, so that if they see the source code of the page, they can see the full content.
Thanks
If you are rendering on the server-side, one way to proceed is to bind the view to an element:
var View = Backbone.View.extend({
el: "#yourSuperId"
});
new View();
Using the el property, you can automatically attach the view to the existing element. You don't need to render it.

Laravel + AngularJS application structure

Currently im in the process of architecturing an application based on Laravel-4 and AngularJS
I do not want to create a single page application.
Is it ok to structure the application along the follwoing lines:
EventsController
Get() returns a laravel view
index() returns json array of events
show() returns json event object
Store() saves a json event object
and generally all the controllers will act in this way, having a get method that serves a laravel blade view and is then manipulated via AngularJS and its partials. Is this best practice?
The plan
Use laravel to create the routes and let laravel create the views. You only need to create different view templates, which hold references to your angular controllers.
PagesController
What you could do is create routes for pages, which renders the views.
So you could have a PagesController which can do this
EventsController
Then use angular to call for the data and have a EventsController for that.
In the EventsController you could add your CRUD, which calls a Event model.
Then this will be the way the traffic get's called
The Model needs to return data.
The Controller then will return json, with http status codes.
Mini example
Underneath is a way how I do this with flash messages when logging in.
return Response::json(array('flash' => 'Invalid username or password'), 500);

Confusion about Backbone.js and Django

I'm trying to use Backbone.js for my Django project and it's confusing. So to my understanding, I need tastypie for the RESTful API with Django to which I'm new, so for example I have a SongResource like follow :
class SongResource(ModelResource):
class Meta:
queryset = Song.objects.all()
authorization = Authorization()
All what this does is gets back a list of all the songs I have in the database, right? To my understanding, I should use this in the Backbone.js router to get all the songs, and then do all the data manipulation in my JS code instead of the Django's view?
So if I want to get all the songs that the logged-in user purchased, I should get all the songs from Django, and search for the user's songs in JS code?
Also, what if I want to save songs the user listened to for example, I'm used to do that by sending an Ajax request to a view where I save the action.
Another thing is, let's say I have five models in my Django app, should I create the give models in Backbone.js too?
So in Backbone.js, I just get the data from Django and manipulate them in the front end instead of the Django views as I'm used to?
If you can see my confusion please guide me to some articles, tutorials, videos whatever !
Thanks a lot
You definitely have to do the filtering on Django side :) I know nothing about tastypie, but as of current (logged in) user, you have that in django session, therefore you cannot rely on Meta.queryset, instead the queryset changes for every request. You probably need to override some view method.
As of saving listened songs, you first decide when to do that (start or end of song), and upon that event you save() some Listening (Backbone) model, that will trigger the XHR request (see Backbone.sync).
Yes, you should Backbone model counterparts for your Django models if you use them client side. Again, see Backbone.sync

Categories

Resources