A Pen by Ivan Rudoy.

index.jade

nav.top-bar(data-topbar='')
  section.top-bar-section
    ul.left
      li: a(href='#!/') Start
      li: a(href='#!/success') Success
      li: a(href='#!/error') Error

.row
  .small-8.small-centered.large-centered.columns
    #block.block

script#start(type="text/template")
  .start
    .userplace
      h3 Username:
      input(type="text", id="username", placeholder="e.g., John, Nick, Jack")
      //small.error Invalid entry
    .buttonplace
      input.button(type="button", value="Check")
      
script#error(type="text/template")
  .error
     .alert-box.alert Error. User <%- username %> not found.
     a(href="#!/").button Go back &larr;
     
script#success(type="text/template")
  .success
     .alert-box.success User <%- username %> found.
     a(href="#!/").button Go back &larr;

script.js

$(function () {
  
//  var Family = ['Nick', 'Thomas', 'John'];
  
  var UserNameModel = Backbone.Model.extend({
    defaults: {
      'Name': ''
    }
  });
  
  var Family = Backbone.Collection.extend({
    model: UserNameModel,
    checkUser: function(username) {
      var findResult = this.find(function (user) {return user.get('Name') == username});
      return findResult != null;
    }
  });
  
  var MyFamily = new Family([
    { Name: 'John' },
    { Name: 'Nick' },
    { Name: 'Jack' }
  ])
  
  var AppState = Backbone.Model.extend({
    defaults: {
      username: "",
      state: "start"
    }
  });
  
  var appState = new AppState();
  
  var Controller = Backbone.Router.extend({
    routes: {
      '': 'start',
      '!/': 'start',
      '!/success': 'success',
      '!/error': 'error'
    },

    start: function() {
      appState.set({ state: "start" });
    },

    success: function() {
      appState.set({ state: "success" });
    },

    error: function() {
      appState.set({ state: "error" });
    }
  });
  
  var controller = new Controller();
  
	var Block = Backbone.View.extend({
    
    el: $('#block'),
    
    templates: {
      'start': _.template($('#start').html()),
      'success': _.template($('#success').html()),
      'error': _.template($('#error').html())
    },
    
    initialize: function() {
      this.model.bind('change', this.render, this);
    },
    
    render: function() {
      var state = this.model.get('state');
      $(this.el).html(this.templates[state](this.model.toJSON()));
      return this;
    },
    
    events: {
      'click input:button': 'check'
    },
    
    check: function() {
      var username = $(this.el).find('input:text').val();
      var find = MyFamily.checkUser(username);
		 appState.set({
        'state': find ? 'success' : 'error',
        'username': username
      })
    }
    
  });
  
  appState.bind('change:state', function() {
  	var state = this.get('state');
    if (state == 'start')
      controller.navigate('!/', false);
    else
		 controller.navigate('!/' + state, false);
  });
  
  var block = new Block({ model: appState });
  
  appState.trigger('change');
  
  Backbone.history.start();
  
  $(document).on('keypress', function(e) {
    if ( e.which == 13 )
      $('.button').trigger('click');
  });
  
});

Simple-Backbone.js-example.markdown

Simple Backbone.js example

A Pen by Ivan Rudoy on CodePen.

License.

style.scss

@import "compass/css3";
body {
  padding: 20px;
}

.button {
  outline: none;
}

.block {
  text-align: center;
}

.top-bar {
  margin-bottom: 50px;
  opacity: .1;
  @include transition-property(all);
  @include transition-duration(.2s);
  @include transition-timing-function(ease-in-out);
  &:hover {
    opacity: 1;
  }
  //display: none;
}