Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script class="jsbin" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script class="jsbin" src="http://documentcloud.github.com/backbone/backbone.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="content">
    <input id="new-todo" />
    <div id="msg"></div>
    <ul id="todo-list"></ul>
  </div>
</body>
</html>
 
$(function(){
​
    AppView = Backbone.View.extend({
​
        el: $(".content"),
​
        initialize: function(options) {
            this.router = this.options.router;
        },
​
        events: {
            "keypress #new-todo": "createOnEnter"
        },
​
        createOnEnter: function(e) {
            if (e.keyCode != 13) return;
            var term = $("#new-todo").val();
            $("#todo-list").append("<li>"+term+"</li>");
            $("#new-todo").val('');
            this.router.navigate("stage/"+term, true);
        }
​
    });
​
    // create router
    AppRouter = Backbone.Router.extend({
​
        initialize: function() {
          Backbone.history.start();
          // create view when router is initialized
          new AppView({router : this});
        },
​
        routes: {
            "stage/:stage" : "renderStage"
        },
​
        renderStage: function(stage) {
          $("#msg").html('Rendered: ' + stage);
        }
​
    });
​
​
    var App = new AppRouter();
​
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers