Backbone routes doesn't work with Laravel

Question

I dont't know exactly where the error/s is/are.

I'm doing a Single Page App, this is the context:

I have a resource controller in Laravel that watch this route "domain.dev/v1/"
Laravel serves the first page/view "/public/views/layouts/application.blade.php"
Mustache views are stored under "public/views/" and they are loaded synchronously when they are called by the Backbone Router (I've modified the "app/config/view.php" file to serve the views from bakcbone)
In backbone, the Router controls every URI change, even pushstate and the respective Mustache views. Everything seems to work fine, but if you type the direct URI for a user o list or users...you only see JSON returned by the server, not the corresponding Backbone View, in other words, I dont know Which is not doing the correct work, the Laravel Router or the Backbone Router. Or is it a Laravel configuration?

This is my code so far:

// app/routes.php

Route::group(['prefix' => 'v1'],function (){

    Route::resource('users','V1\UsersController');

    Route::get('/', function()
    {
      return View::make('layouts.application')->nest('content', 'app');
    });
});


// app/controllers/V1/UsersController.php

namespace V1;

//import classes that are not in this new namespace
use BaseController;
use User;
use View;
use Input;
use Request;

class UsersController extends \BaseController {

    public function index()
    {
        return $users = User::all(['id','email','name']) ;
    }

    public function show($id)
    {
        $user = User::find($id,['id','email','name']);

        if(is_null($user)){
            return array(
                'id' => 0,
                'email' => 'fake email'
                );
        }
        return $user;
    }

// public/js/namespaces.js

(function(){

    window.App = {
        Models : {},
        Collections : {},
        Views : {},
        Router : {}
    };

    window.Templator = function (mustacheView){
        return $.ajax({
            url: '/views/'+mustacheView,
            async : false,
            type: 'GET',
        }).responseText;
    };

    window.Vent = _.extend({},Backbone.Events); 

})();

// public/js/backbone/router.js

App.Router = Backbone.Router.extend({
    routes : {
        '' : 'home',
        'users' : 'showAll',
        'users/:id' : 'showUser',
        'login' : 'showLoginForm'
    },
    home: function (){
        Vent.trigger('home:index');  
    },
    showAll : function (){
        Vent.trigger('users:showAll');  
    },
    showUser: function (id){
        Vent.trigger('users:show',id);  
    },
    showLoginForm : function (){
        Vent.trigger('login:form');  
    }
});


// public/js/app.js
$(function() {

    $(document).on("click", "a", function(e){
        var href = $(this).attr("href");

      if (href != '#')  {
        e.preventDefault();
        Backbone.history.navigate(href,{trigger:true});
      }
    });

    new App.Views.AllUsers;
    new App.Views.Index;
    new App.Views.Login;
    new App.Router;

    Backbone.history.start({ 
        pushState: true, 
        silent: true,
        root: '/v1' 
    });
});

So, if I type this URI "domain.dev/v1/users" on the nav bar, shows list of users in JSON and the view associated in backbone is not displayed. Any suggestions?

I'm not particularly familiar with Backbone, but as far as the Laravel code goes you are getting what you should. Your controller action is returning an array of users, which Laravel automatically converts to a JSON response. If you want to return a view from Laravel you should return `View::make('view_name')`, but I'm guessing you have some databinding going on for the view from the Backbone app, so you'd need to handle that if a direct route to `/v1/users` returns a view instead of an array. — Bogdan, Dec 07 '14 at 21:13
Yeah, you are right @Bogdan .Laravel restful API only returns and receives JSON. But I think the problem might be "deep-linkg" in BackBone. I really confusing now, I dont' know where else to inspect — Frankistan, Dec 08 '14 at 01:01

score 0 · Accepted Answer · edited May 23 '17 at 12:27

0

Have a look at my answer I just gave in a similar question about Angular: Angular and Laravel

In the text, just mentally replace Angular with Backbone.

How to pass the route from Laravel to Backbone:

The base view, that is returned from Laravel for the '/' route needs to have something like this somewhere in its <head> before backbone.js is included:

<script>
    var myRoute = "{{ $route }}";
</script>

This blade template creates a Javascript variable. Then, after you declared your routes in Backbone, add this:

Backbone.history.start(); // You should already have this line, so just add the next one
App.nav.navigate(myRoute);

This should do the trick.

edited May 23 '17 at 12:27

Community

1
1

answered Dec 07 '14 at 23:58

sisou

323
2
7

I think your solution would work @sisou but... how to handle that variable "route" passed to the main page that was rendered by the server?? (in your example-> "return Redirect:to('/')" ). – Frankistan Dec 08 '14 at 15:58
I also edited my answer to give directions for getting the `route` variable from Laravel to Backbone. – sisou Dec 08 '14 at 18:10
It seems to be perfect, I will try and comment you the result ;) – Frankistan Dec 10 '14 at 00:00
Perfect! I only had to do some adjustments on my Laravel filters and routes and voilá! Thank you @sisou – Frankistan Dec 10 '14 at 01:02

Backbone routes doesn't work with Laravel

1 Answers1