一页上有多页

Question

I am using backbone.js and building a single page application, inspired by trello.com ..

I want to know how you show many pages on top of the original page. As in how you architect it.

How do you use Backbone routers to achieve this?

For example in trello

Basepage

And then now on top of the base page you have dynamic content

like a cards detail

like a boards details

How could i architecture something like this?

Answer 1

I've done a couple of approaches so far in projects with 50+ pages and they both scaled well. I did not use backbone.js but the approaches are straight forward and do not require a framework to learn other than I used jQuery for selectors.

Both of them have in common creating a single overlay window that you can pull in content into the window. I wrote mine from scratch but you could easily use jQuery UI dialog. The two approaches only differ in how the content is pulled. Also, using the information on the link is all you should need to pull in the "module" or overlay content as your rule. Do not need tons of scripts loaded in to start your app. Have the modules pull in the behavior for you.

Option 1) Use the jQuery load method to pull content from stand-alone web pages by using a placeholder variable like so:

var $ph = $('<div />'); 
$ph.load(URL); // loads gui of remote URL + executes any script that URL has

The $ph var now contains all the GUI loaded in from the external URL so you can use selector on it to extract the particular HTML and place it into your DOM or overlay as you need.

Here is an example of the stand-alone HTML output:

<div class="module">
    <a class="link">click me</a>
</div>
<script>
(function(){
    // put any private vars here
    $('.module .link').click(function(){
        // do something
    });
})();
</script>

If you remove() or destroy the dom inside the overlay through jQuery, it will automatically remove all the events directly assigned aka "bind" and "unbind" them but using "live" or "delegate" you will need to worry about "die" and "undelegate" etc. just doing die('.namespace').live('click.namespace') will ensure is cleaned.

Here is an example of this on one of my websites -> http://www.kitgui.com/docs But the better example is within the customer section as the docs is fairly simple using hash history.

2) Using an iframe inside your overlay and assigning it a URL.

This is the easiest option but is a little slower because each page called has to have a full standalone behavior and dependencies with the iframe. Also you must worry about sizing the frame etc. unless you have a fixed overlay window.

You must have a loader overlay your iframe while its loading then have the iframe talk the parent to tell it its done loading and hide the loader.

I did this for several sites but one of them is a site in development you can see here to get the code ->

http://dev.zipstory.com (sign in and go to my zipstory and click "group" settings etc to see this, just view source to see how I did this as its all there)

The thing about iframes is you should write some code on the parent that accepts standard messages from the iframe that you agree on as a typical set of behavior such as notifying its done loading or passing messages to update something on the parent etc. This can be added on the fly and refactored as you need as long as your aim is KISS approach.

Answer 2

Each of the 'dynamic content' pages should be a template (underscore.js gives you _.template()) rendered by a backbone view. The main page needs to have events that initialize new views and render the templates. Look at the todos app ( http://documentcloud.github.com/backbone/docs/todos.html ) to get a basic idea about the flow of a backbone app.