Created
May 18, 2012 16:41
-
-
Save MikeLarned/2726297 to your computer and use it in GitHub Desktop.
BackboneCollectionExample
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| App = { | |
| start: function () { | |
| new StockCollectionView; | |
| } | |
| }; | |
| $().ready(function() { | |
| App.start(); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <link rel="stylesheet" href="content/bootstrap.min.css" /> | |
| <link rel="stylesheet" href="content/bootstrap-responsive.min.css" /> | |
| <link rel="stylesheet" href="content/Site.css" /> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="page-header"> | |
| <h1>Backbone Collection Sorting</h1> | |
| </div> | |
| <div class="row"> | |
| <div class="span4"> | |
| <p><a href="#" class="btn btn-large btn-primary" style="width: 90%;">Sort By Ticker</a></p> | |
| </div> | |
| <div class="span8" id="stock-listview"> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> | |
| <script src="scripts/bootstrap.min.js" type="text/javascript"></script> | |
| <script src="scripts/underscore.js" type="text/javascript"></script> | |
| <script src="scripts/backbone.js" type="text/javascript"></script> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| StockView = Backbone.View.extend({ | |
| template: _.template($("#stock-view-template").html()), | |
| render: function() { | |
| $(this.el).html(this.template({ model: this.model })); | |
| return this; | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script type="text/html" id="stock-view-template"> | |
| <div class="stock" style="width: 325px; padding: 10px; float: left;"> | |
| <img alt="<%= model.get('ticker') %>" src="http://chart.finance.yahoo.com/t?s=<%= model.get('ticker') %>&lang=en-US®ion=US&width=300&height=180"/> | |
| <div style="margin: 10px 0 10px 0;"> | |
| <span class="badge badge-important">My Rank : <%= model.get('myrank') %></span> | |
| <span class="badge badge-warning">Friend Rank : <%= model.get('friendrank') %></span> | |
| </div> | |
| </div> | |
| </script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Stocks = [ | |
| { name: "Google", ticker: "GOOG", myrank: 5, friendrank: 3 }, | |
| { name: "EMC Corporation", ticker: "EMC", myrank: 23, friendrank: 7 }, | |
| { name: "Caterpillar Inc", ticker: "CAT", myrank: 1, friendrank: 2 }, | |
| { name: "Apple", ticker: "AAPL", myrank: 36, friendrank: 54 }, | |
| { name: "Lockheed Martin Corporation", ticker: "LMT", myrank: 32, friendrank: 74 }, | |
| { name: "Starbucks Corporation", ticker: "SBUX", myrank: 16, friendrank: 17 } | |
| ]; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment