douzhai1182 2014-12-07 20:17
浏览 62
已采纳

Backbone路由不适用于Laravel

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

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

  1. I have a resource controller in Laravel that watch this route "domain.dev/v1/"
  2. Laravel serves the first page/view "/public/views/layouts/application.blade.php"
  3. 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)
  4. 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?

  • 写回答

1条回答 默认 最新

  • dongmen1925 2014-12-07 23:58
    关注

    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.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题