I am using laravel and backbone and have many modules in my application like contacts , tasks etc Here are my route.php
Route::get('task', array('uses' => 'TaskController#render'))->before('auth'); Route::get('contact', array('uses' => 'ContactController#render'))->before('auth');
and render function in controller looks like
public function render() {
return View::make('task');
}
and backbone views(view/model/collections) are used to render.
task.blade.php extends application.blade.php(this file has the navigation)
How can I have these links as tabs so that i can navigate between these without page refresh.
I'm not certain that your question has anything to do with Laravel, but is mainly related to your front-end JavaScript.
If you are looking to handle dynamic SPA routing, I would recommend looking at something like AngularJS or EmberJS which has routing support built-in.
Otherwise, you need for a routing library that will handle this on the front end.
Related
I am completely new to Laravel + AngularJs. What I want to do is handle my web.php routes using AngularJs. Is it possible? If it how can I do that?
If you have an SPA and your app is using HTML5 history mode, this should be similar to how people often combine Laravel and VueJS routing.
You'd usually have all of your non-Angular routes at the top of routes/web.php and then a "catch-all" route for your SPA. This "catch-all" route is basically a route that doesn't care what the route looks like; it will just send it on to the AngularJS app.
Similar to this answer or this article your routes/web.php might look something like:
Route::resource('Videos', 'VideoController')->middleware('auth','isAdmin');
Route::resource('Categories', 'CategoriesController')->middleware('auth');
...
Route::get('/{angularjs_capture?}', function () {
return view('angularjs.index');
})->where('angularjs_capture', '[\/\w\.-]*');
And then you'd have a view at /resources/views/angularjs/index.blade.php that contains the base HTML for your SPA.
Is there a way to keep track of history outside of a backbone router. I have a pagination service provided by Laravel, the links between pages are like the following "#leads?page=7". Everything works, but I have no clue right now on how to apply track of history outside of the router. The router works for the dashboard options but not for the pagination.
I am not using Backbone.Marionette for a single page app, but more for varius tools on my site. I wanted to have Laravel render the initial pages for SEO reasons. I had Laravel write the first pagination block then I have Marionette rewrite it after any interaction. You have to love twice the amount of work, but I like the fact that I don't have to worry about search engine not seeing the page.
In order to do this, I ended up not using the backbone router for this tool at all. I used javascript history. It is only available in newish browsers, but that is what our site supports. If you do need to support older browsers there is a shim, but I have not used it.
// add to history
history.pushState('', 'Search: ' + tags, url);
// get current history
updateUrl: function(){
var currentState = history.state;
return (currentState) ? currentState : $(this)[0].baseURI;
}
It definitely was more work, but I was able to get it working the way I wanted.
I am building a multi-page application and would like to leverage Backbone's Router to initialize my views on page load. I haven't been able to find a way to leverage routers without using hashes and I don't need or want to use push state.
Basically, all I want to be able to do is use the Routers URL pattern matching to match the url and initialize my views depending on which page is loaded from the server.
Perhaps I am thinking about this all wrong or maybe there is a way to do this natively in Backbone Routers that I am missing. Any suggestions are greatly appreciated.
From the Backbone documentation (emphasis mine):
Backbone.Router provides methods for routing client-side pages, and connecting them to actions and events.
In other words, the Backbone Router was only designed to handle client-side URLS (the part after the hash), not server-side ones (the part before the hash). There might be a way to hack the Router and Backbone.History to use full URLs instead of just the hash, but it would not be easy and I'd recommend against it.
One alternative you could consider is some sort of onDocumentReady logic that checks the URL of the page and, if it's hash doesn't match it's URL, adds a hash. This would make it so that if someone visits "/foo" your code would convert it to "/foo#foo", and the Backbone Router could be used normally.
Another option though would just be to write your own "router" of sorts, which will actually be simpler than Backbone's because it only needs to work once per page load. Here's a simple example:
var mockRouter = {
foo: function() {
// do stuff for page "foo"
},
bar: ...
}
$(function() {
mockRouter[window.location.pathname]();
});
I try to make a single page app with Rails 3.2 and Backbone.js with pushState option but faced with something that I do not understand.
If I load the root URL of the app (/), everything goes right: Rails return an HTML-layout with JS which bootstraps Backbone which makes some XHRs for JSON-entities and renders the content.
But if I start using app from non-root URL (e.g. by manually typing it in the browser's address bar) then Rails will try to handle this request using theirs routing rules from routes.rb - that's wrong, cause it's a "Backbone's" route. How do I load the page and bootstrap Backbone for handling this URL in that case?
Finally I found the solution.
I put the following code into my routes.rb
class XHRConstraint
def matches?(request)
!request.xhr? && !(request.url =~ /\.json$/ && ::Rails.env == 'development')
end
end
match '(*url)' => 'home#index', :constraints => XHRConstraint.new
With this matcher all non-XHR requests are routed to HomeController which returns an HTML page. And XHR requests will be handled by other controllers which return JSON responses.
Also I left requests ending with ".json" as valid in development environment for debugging.
This is a somewhat tricky issue, but basically in a nutshell, you need to respond to all valid (HTML) requests in rails with the same (root) page, from there backbone will take over and route to the correct route handler (in your bakckbone router).
I've discussed this issue in more detail here: rails and backbone working together
Basically what I do is to create actions for every page that I want to handle, and blank views. I use respond_with to return the page (which is the same in each case) and because I handle GET actions only for HTML requests, I add this line at the top of the controller:
respond_to :html, :only => [ :show, :new ]
JSON requests are handled with respond_with as well, but unlike the HTML requests actually return the requested resource (and perform the requested action in the case of PUT, POST and DELETE).
Backbone will not be informed of your url change if you do it manually. This change will be catch by the browser and it will do its job sending the request to the server as usual.
Same if you click in a normal link, it will follow its href without inform Backbone.
If you want Backbone being in charge of a url change you have to do it through the Backbone tools you have available and this is the own Router.
So if you want to make an URL change in the Backbone way you have to do it explicitly, something like:
app.router.navigate("my/route", {trigger: true});
Backbone define routes in its Controller in the following fashion. Does this mean every page of the site must have a copy of it? Or that every script must be load when the user reach the first page to make it work?
var Workspace = Backbone.Controller.extend({
routes: {
"help": "help", // #help
"search/:query": "search", // #search/kiwis
"search/:query/p:page": "search" // #search/kiwis/p7
},
help: function() {
...
},
search: function(query, page) {
...
}
});
It's a hashbang router, those's aren't real pages. The urls look like:
mysite/!#help
mysite/!#search/kiwis
etc.
It's used to route single page web apps. So you only serve one page and then render other pages by getting your data from a JSON web service.
Backbone.js allows you to route to sub pages on the client inside a page. This means you can change your URL to a book markable state and when you reload the page, backbone will reload that "section" of the page.
This routing should only be used inside a page and should not span across multiple pages.
You should be using your serverside MVC framework for that.
CodeIgniter for PHP
Express for node.js
Rails for Ruby/Groovy
MVC for ASP.NET
Django for Python
etc.