Skip to content

Instantly share code, notes, and snippets.

@abernier

abernier/index.html

Last active October 7, 2015 14:58
Show Gist options
  • Save abernier/3183257 to your computer and use it in GitHub Desktop.
Save abernier/3183257 to your computer and use it in GitHub Desktop.
Download ZIP
Backbone and anchors
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Home</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="https://rawgithub.com/jashkenas/backbone/master/backbone.js"></script>
<script src="index.js"></script>
<script id="home-tmpl" type="text/template">
<div id="top"></div>
<h1>Home</h1>
<a href="product1.html">Product1</a>
scroll down...
<a href="#top" style="display:block;margin-top:2000px;">Go to top</a>
</script>
<script id="product1-tmpl" type="text/template">
<a href="">home</a>
<h1>Product1</h1>
<a href="#special-offer">⚓ Go to special offer section</a>
<section id="special-offer" style="margin-top:50em; border:1px dotted;">
<h2>Special Offer</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu risus nec lacus bibendum varius. Ut ligula nisl, pulvinar a molestie at, sodales id arcu. Sed feugiat velit id nisl faucibus scelerisque. Donec a eleifend nibh. Morbi convallis pellentesque velit. Ut vulputate rhoncus justo ac pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse quis elementum tellus. Praesent odio dui, auctor a pretium et, tristique ut eros. Sed quis ipsum sit amet nunc blandit pretium sed eu dolor. Sed vitae arcu quam, ac varius risus. Integer at diam erat, congue posuere quam.</p>
<p>Suspendisse potenti. Nullam vehicula rhoncus felis, a tincidunt mauris sodales ut. Nam vulputate dolor vel sapien ornare porta. Maecenas nulla neque, pharetra quis condimentum sit amet, gravida pharetra erat. Suspendisse augue ante, mattis a rutrum non, aliquam eu libero. Vivamus et enim nulla. Donec auctor hendrerit massa, vitae molestie turpis luctus molestie. Curabitur eget lectus sit amet ligula luctus aliquam. Aliquam elementum est sit amet augue convallis dignissim. Nam sed ipsum vitae mi consequat sollicitudin non at nulla. Vestibulum felis nisi, dapibus quis scelerisque sed, dignissim id arcu. Donec ac mauris scelerisque tortor tempus consectetur ut sit amet neque. Vestibulum bibendum dolor a quam ultricies mollis. Quisque eget dictum mauris.</p>
</section>
</script>
</head>
<body>
<div id="top"></div>
<h1>Home</h1>
<a href="product1.html">Product1</a>
scroll down...
<a href="#top" style="display:block;margin-top:2000px;">Go to top</a>
</body>
</html>
Raw
index.js
var Router = Backbone.Router.extend({
initialize: function () {
var that = this;
$(function () {
alert('page loaded!');
Backbone.history.start({
root: '/abernier/raw/3183257/',
pushState: true,
hashChange: false
});
// Trap links
$('body').delegate('a[href]:not([href^=#])', 'click', function (e) {
e.preventDefault();
that.navigate($(this).attr('href'), {trigger: true});
});
// Block anchors for hash-based history
if (!Backbone.history._hasPushState) {
$('body').delegate('a[href^=#]', 'click', function (e) {
e.preventDefault();
});
}
});
},
routes: {
'': 'home',
'product1.html': 'product1'
},
home: function () {
$('body').html($('#home-tmpl').text());
alert('Welcome Home!');
},
product1: function () {
$('body').html($('#product1-tmpl').text());
alert('Welcome to Product1!');
}
});
var router = new Router();
Raw
product1.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Product1</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="https://rawgithub.com/jashkenas/backbone/master/backbone.js"></script>
<script src="index.js"></script>
<script id="home-tmpl" type="text/template">
<div id="top"></div>
<h1>Home</h1>
<a href="product1.html">Product1</a>
scroll down...
<a href="#top" style="display:block;margin-top:2000px;">Go to top</a>
</script>
<script id="product1-tmpl" type="text/template">
<a href="">home</a>
<h1>Product1</h1>
<a href="#special-offer">⚓ Go to special offer section</a>
<section id="special-offer" style="margin-top:50em; border:1px dotted;">
<h2>Special Offer</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu risus nec lacus bibendum varius. Ut ligula nisl, pulvinar a molestie at, sodales id arcu. Sed feugiat velit id nisl faucibus scelerisque. Donec a eleifend nibh. Morbi convallis pellentesque velit. Ut vulputate rhoncus justo ac pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse quis elementum tellus. Praesent odio dui, auctor a pretium et, tristique ut eros. Sed quis ipsum sit amet nunc blandit pretium sed eu dolor. Sed vitae arcu quam, ac varius risus. Integer at diam erat, congue posuere quam.</p>
<p>Suspendisse potenti. Nullam vehicula rhoncus felis, a tincidunt mauris sodales ut. Nam vulputate dolor vel sapien ornare porta. Maecenas nulla neque, pharetra quis condimentum sit amet, gravida pharetra erat. Suspendisse augue ante, mattis a rutrum non, aliquam eu libero. Vivamus et enim nulla. Donec auctor hendrerit massa, vitae molestie turpis luctus molestie. Curabitur eget lectus sit amet ligula luctus aliquam. Aliquam elementum est sit amet augue convallis dignissim. Nam sed ipsum vitae mi consequat sollicitudin non at nulla. Vestibulum felis nisi, dapibus quis scelerisque sed, dignissim id arcu. Donec ac mauris scelerisque tortor tempus consectetur ut sit amet neque. Vestibulum bibendum dolor a quam ultricies mollis. Quisque eget dictum mauris.</p>
</section>
</script>
</head>
<body>
<a href="">home</a>
<h1>Product1</h1>
<a href="#special-offer">⚓ Go to special offer section</a>
<section id="special-offer" style="margin-top:50em; border:1px dotted;">
<h2>Special Offer</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu risus nec lacus bibendum varius. Ut ligula nisl, pulvinar a molestie at, sodales id arcu. Sed feugiat velit id nisl faucibus scelerisque. Donec a eleifend nibh. Morbi convallis pellentesque velit. Ut vulputate rhoncus justo ac pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse quis elementum tellus. Praesent odio dui, auctor a pretium et, tristique ut eros. Sed quis ipsum sit amet nunc blandit pretium sed eu dolor. Sed vitae arcu quam, ac varius risus. Integer at diam erat, congue posuere quam.</p>
<p>Suspendisse potenti. Nullam vehicula rhoncus felis, a tincidunt mauris sodales ut. Nam vulputate dolor vel sapien ornare porta. Maecenas nulla neque, pharetra quis condimentum sit amet, gravida pharetra erat. Suspendisse augue ante, mattis a rutrum non, aliquam eu libero. Vivamus et enim nulla. Donec auctor hendrerit massa, vitae molestie turpis luctus molestie. Curabitur eget lectus sit amet ligula luctus aliquam. Aliquam elementum est sit amet augue convallis dignissim. Nam sed ipsum vitae mi consequat sollicitudin non at nulla. Vestibulum felis nisi, dapibus quis scelerisque sed, dignissim id arcu. Donec ac mauris scelerisque tortor tempus consectetur ut sit amet neque. Vestibulum bibendum dolor a quam ultricies mollis. Quisque eget dictum mauris.</p>
</section>
</body>
</html>
@abernier
Copy link
Author

abernier commented Oct 4, 2013

http://bl.ocks.org/abernier/raw/3183257/
http://stackoverflow.com/questions/11672687/anchors-in-links
jashkenas/backbone#2791

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment