The XBlock JavaScript File#
This section of the tutorial walks through the JavaScript file, thumbs.js, that is part of the Thumbs XBlock in the XBlock SDK.
If you completed the steps in Build an XBlock: Quick Start, you can find
this file locally at xblock_development/xblock-sdk/sample_xblocks/thumbs/static/js/src/thumbs.js
.
In the XBlock JavaScript file, you define code that manages user interaction with the XBlock. The code is added to a fragment.
The XBlock’s JavaScript uses the runtime handler, and can use the children
and childMap
functions as needed.
The JavaScript references the XBlock fields and methods. The fragment is returned by the view method, to be displayed by the runtime application.
function ThumbsAside(runtime, element, block_element, init_args) {
return new ThumbsBlock(runtime, element, init_args);
}
function ThumbsBlock(runtime, element, init_args) {
function updateVotes(votes) {
$('.upvote .count', element).text(votes.up);
$('.downvote .count', element).text(votes.down);
}
var handlerUrl = runtime.handlerUrl(element, 'vote');
$('.upvote', element).click(function(eventObject) {
$.ajax({
type: "POST",
url: handlerUrl,
data: JSON.stringify({voteType: 'up'}),
success: updateVotes
});
});
$('.downvote', element).click(function(eventObject) {
$.ajax({
type: "POST",
url: handlerUrl,
data: JSON.stringify({voteType: 'down'}),
success: updateVotes
});
});
return {};
};
Note the following details about the JavaScript file.
The function
ThumbsBlock
initializes the XBlock. A JavaScript function to initialize the XBlock is required.The
ThumbsBlock
function maps to the constructor in the XBlock Python file and provides access to its methods and fields.The
ThumbsBlock
function uses the runtime handler.var handlerUrl = runtime.handlerUrl(element, 'vote');
The
ThumbsBlock
function includes thePOST
commands to increase the up and down votes in the XBlock.
The XBlock JavaScript code can also use the children
and childMap
functions as needed. For more information, see XBlock Children.