CODEWITHSUNDEEP
javascriptbackbone.js
Scott Sword
Scott Sword

Reputation: 4708

Super simple page navigation with Backbone

I have searched all over the place to no avail. Everyone seems to have their own way of building some form of a todo list with backbone. I need to do something a little different albeit more crude. I need to build a four page site on top of backbone–I know I could easily do this with jQuery or equivalent, but this might be something that is increased in scope down the road. So really Im not using Models or Collections, just routes, views and templates. My number of templates is so small I don't need to get them from an external folder I can just swap out divs and have the templates live inline.

In its most simple form I have a single page web app that I need to swap out 4 static views with with one button, one direction, with a start and finish. Thats it. No tutorial or documentation I have found performs something this basic with backbone. Any savvy folks out there care to point me in the right direction?

Upvotes: 2

Views: 3753

Answers (1)

loganfsmyth
loganfsmyth

Reputation: 161457

Here's a simple little one-page app that swaps out 4 different templates and steps from page 1 to 4 as you press the button. Let me know if you have questions.

<html>
  <head>
    <title>Steps</title>
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
    <script type="text/x-template" id="page-1">
      <p>Page one content</p>
    </script>
    <script type="text/x-template" id="page-2">
      <p>Page two content</p>
    </script>
    <script type="text/x-template" id="page-3">
      <p>Page three content</p>
    </script>
    <script type="text/x-template" id="page-4">
      <p>Page four content</p>
    </script>
    <script>
      (function($){
        // Helper to get template text.
        function getTemplate(index){
          return $('#page-' + index).text();
        }

        // Simple view to render a template, and add a button that
        // will navigate to the next page when clicked.
        var PageView = Backbone.View.extend({
          index_: null,

          events: {
            'click button': 'nextPage_'
          },

          initialize: function(options){
            this.index_ = options.index;
          },

          render: function(){
            var html = getTemplate(this.index_);

            // If there is a next page, add a button to proceed.
            if (html && getTemplate(this.index_ + 1)){
              html += '<button>Next</button>';
            }
            this.$el.html(html);
          },

          nextPage_: function(){
            router.navigate('page/' + (this.index_ + 1), {trigger: true});
          }
        });

        // Router handling a default page, and the page urls.
        var Router = Backbone.Router.extend({
          routes: {
            'page/:index':  'loadPage',
            '*notFound': 'defaultPage'
          },
          defaultPage: function(){
            this.loadPage();
          },
          loadPage: function(index){
            // Default to page 1 when no page is given.
            index = parseInt(index, 10) || 1;

            if (this.pageView_) this.pageView_.remove();
            this.pageView_ = new PageView({index: index});
            this.pageView_.render();

            this.pageView_.$el.appendTo('#content');
          }
        });

        var router;
        $(function(){
          router = new Router();
          Backbone.history.start({pushState: true});
        });
      })(jQuery);
    </script>
  </head>
  <body>
    <!-- Some page header -->
    <section id="content"></section>
  </body>
</html>

Upvotes: 3

Related Questions