How to use backbone.js routes to trigger JavaScript functions
Question
To start off, here's my little section of code that I'm trying to use to declare the routes -
<script>
var Workspace = Backbone.Router.extend({
routes: {
"test": "test", // #test
},
test: hideone() {
...
},
});
</script>
I'm trying to make it so that when someone reaches "www.website.com/index.html#test", it'll trigger the JavaScript function "hideone", which I have written out earlier in the document.
If it helps, here's "hideone" -
<script>
function hideone() {
var elem = document.getElementById("one");
elem.className = "hide";
}
</script>
I've never used backbone.js before, and I couldn't find documentation for my specific problem here.
2 answers
solution1
2 ACCPTED 2014-08-13 19:25:53
You need to create an instance of your router and you also need to call Backbone.history.start . From Backbone documentation :
When all of your Routers have been created, and all of the routes are set up properly, call Backbone.history.start() to begin monitoring hashchange events, and dispatching routes.
So you need to add these 2 lines at the end of your script:
var router = new Workspace();
Backbone.history.start();
You also need to take into account what @w1zeman1p said about defining the test function. The call to Backbone.Router.extend receives an object where one of the properties is named test and whose value must be a function. You can either define it inline or assign it the hideOne function:
//opt1 - assign an existing function
test: hideOne
//opt2 - inline
test: function(){
//function code
}
I have created this fiddle with the first approach.
EDIT
Make sure you include the scripts in the following order either on your head or before closing the body (As reference, you can check it on the fiddle by right clicking on the Result pane and selecting inspect):
<head>
<!-- Include JS libraries before closing the head. You could also move them inside the body, right before the closing </body> -->
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<!-- Your code here in another <script> tag -->
</head>
You can then include your JS in another <script> tag either before the closing </head> or before the closing </body> . (Please note that you don´t need to load the libraries from the urls above, I am just trying to clarify the order of the libraries)
solution2
1 2014-08-13 18:56:23
The left hand side value of "test" in the routes object is a property whos value is a function. try this:
<script>
var Workspace = Backbone.Router.extend({
routes: {
"test": "test",
},
test: function() {
var elem = document.getElementById("one");
elem.className = "hide";
}
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.