I'm quite new to backbone.js and trying to convert a normal javascript/jquery application into backbone MVC. With it I came of Backbone.Router and I'm currently trying to solve my old URL handling with backbone, but there some problems I'd like to discuss with you:
My traditional URL pattern looks like this:
/#/lang=1&page=panorama&cats=13,3,4,6,7,8,9,10,11&pid=4
How could this look like with backbone and how to code it?
The thing is, that my traditional handling allowed me to evaluate my URL string with not caring about the order of the parameters. With backbone this seems not to be possible. For my application its like necessary to pass categories (see cats=..) and so on in the url, to link to a specific app position/state.
I already tried it with the pid (panorama-id), so the patters is like:
/panorama/:id
"panorama" is currently no parameter, but stand for a certain page in the application.
I would be really thankful if someone has got a solution for me.
Best solution: https://github.com/jhudson8/backbone-query-parameters
Related
I'm trying to create a website that has multiple community feeds like one for bowling and another for poker like so: localhost:8088/communities/bowling & localhost:8088/communities/poker.
I use actix as my webserver operating under the Rust programming language.
Is there a way where all addresses operating under localhost:8088/communities encounter the same web files so that I can just have one main route?
Then store the additional header like /bowling or /poker so that I can commit to separate requests to the server for the relevant post feeds? Maybe I can save the additional header information in a javascript variable when the web page is called? -Like when I go to /poker, a variable named communityType gets set to poker. How would I do something like that?
Because there's no way anyone is making HTML pages for each of ~100s different communities.
Thanks for the help in advance!
I'm not very familiar with this crate, but based on the docs it looks like you can use #[get("/route/this/function/will/support")] to define how a route is handled. Assuming that I wrote it correctly, this should respond with small message telling you which community route you are on when using.
use actix_web::{get, web, App, HttpServer, Responder};
#[get("/communities/{name}")]
async fn communities_route(web::Path(name): web::Path<String>) -> impl Responder {
format!("This is the page for the {:} community!", name)
}
You could also expand it to have routes for say #[get("/communities/{name}/forums")] or #[get("/communities/{name}/{file}")] to handle common routes all communities have on a per community basis.
Edit:
It sounds like you also need to include .service(communities_route) in your main function when initializing the App to use #[get(x)]. You also have better control over how the route is handled if you configure the services directly.
Here is one snippet from their hello world example. It looks like it prints the request on the server so long as you visit any route other than "/index.html".
async fn index(req: HttpRequest) -> &'static str {
println!("REQ: {:?}", req);
"Hello world!"
}
App::new()
.service(web::resource("/index.html").to(|| async { "Hello world!" }))
.service(web::resource("/").to(index))
I recommend looking through their examples on github. It looks like they have a bunch of concise examples for many different use cases.
Parse.com has removed the Backbone style Parse.Collection from the JS SKD (from here https://parse.com/docs/downloads):
SDK no longer contains Backbone-specific behavior. Moving forward, the core SDK will not be tied to any single framework, but we will work with the community to produce up-to-date bindings like Parse+React. The major changes are the removal of Parse.Collection, and allowing Parse.Objects to act as event channels.
I have a lot of code that uses parse.collection, both in web apps and node.js apps. What options do I have to replace this collections to something similar? or switch to another best practice?
for example, in the case of my web app, should I wrap the parse sdk in backbone to keep using this functionality?
thanks for your ideas
You can override the Backbone parse function with :
parse: function (response) {
return response.results;
},
I know this question might trigger some reactions of the type "View-model separation is good". So please be aware that I am aware of that :).
So, when activating a route, Durandal obtains a view by doing a very simple get request, just using something like "view.html" in the get url.
Question: is it supported to add a parameter to the url? So as to have: "view.html?id=4".
I know it's not the point but I want to do it anyway. Why? Because currently, an important part of the js code happens in the viewAttached method. I am using a js library for adding stuff to the page, that needs access to the dom. So when reaching the page, one can see modifications taking place, and it's not nice to see the page changing like that. So I'd prefer that stuff to happen on the server, using a .Net control.
Thanks,
Nicolas
I think that you can find all the information that you need in this other question: Pass data in DurandalJS to other view
I'm trying to implement AJAX filtering on my own e-commerce website and looking for the best solution.
With what I've come up is:
Making all content statically generated (built by server-side and then calling ajax request on the same page but with parameters). The only cons is that user doesn't have any back history as his URL page doesn't change.
I would try to implement history.api and etc but just saw this awesome filtering right here: http://trendygolf.com/shop?brand[]=15&brand[]=27&price-min=0&pricemax=2000&sort=newest
From what I see it makes AJAX calls AND changes the URL without reloading the page, how is that even possible?
And of course it simply replaces the old html page with the new one from request
I would love to hear some help on this one, what are best practices, pros/cons, and how does trendygolf.com make it like this.
With respect to updating the URL in place, it's part of HTML5, not 100% sure how IE support is though. This will work:
window.history.pushState(“object or string”, “Title”, “/new-url”);
To learn more about this sort of the thing check out the Mozilla docs: https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history
It sounds like you could use the History.js library, which lets you change the browser's state/URL from JavaScript. Basically this library uses the HTML5 History API if available, but can emulate it in browsers which don't support this. History.js is a low-level API though, and you may want to use a Router abstraction on top of it, which simplifies your programming considerably. For this purpose I've implemented the StateRouter.js library.
A simple example of how one may use StateRouter.js:
function getHome() {
}
function getPersons() {
}
function getPerson(id) {
}
var router = new staterouter.Router();
// Configure routes
router
.route('/', getHome)
.route('/persons', getPersons)
.route('/persons/:id', getPerson);
$(document).ready(function () {
// Perform initial routing
router.perform();
// Navigate to a URL
router.navigate('/persons/1');
// Go back
router.back();
// Go forward
router.go(1);
});
in addition to the answer given by newmu
when you need to maintain history/state on ajax calls you should use hashtags
which are a part of the url after symbol hash('#'). whatever you write after # in a url isn't sent to the server
in browsers where history api is still not supported hashtags are used to maintain state
also hashtags can be changed without reloading the page
I would like to use the Glimpse client viewer in a web application in order to render some JSON. I am unable to use the Glimpse server implementation on the site in question. However, I can implement my own IHttpHandler to render the information using the Glimpse JSON format.
Has anyone done this and posted details on how to do it? If not, can anyone tell me the steps required to get this up and running? Alternatively, are there any other similar viewer frameworks out there?
Note: I am poking around the source and have seen the client js etc. I will continue down the source hacking route, but was hoping someone may have some shortcuts for me!
As Nik said I would be interested in what you are trying to do. But in the mean time the best place to look is http://getglimpse.com/Protocol.
If you look on this page you will see that we have built a protocol tester. This allows you to put in any JSON and see the output.
If you want to do this yourself, have a look at http://getglimpse.com/Scripts/Protocol/LayoutExample.js and you will see how we do this without using the whole of Glimpse.
You will see that we are doing something like the following:
var data = { test : 'test', hello : 'hello' };
var html = $Glimpse.glimpseProcessor.build(data, 0, false)
$('.panel').html(html);
I know this isn't as nice as it could be but it wasn't designed with this in mind.
We are currently working on refactoring the client code to make this all better.
We haven't really documented all of this yet.
Your best bet is to look at first glimpse javascript file that gets rendered to a page - it is the data file. If you can output data in that format, which is basically just one object of key value pairs, then the client will pick up the data and render it.
You might also want to look at the Glimpse.PHP implementation, since they'vve had to do the same thing you are.