Make sure you have uploaded at least one image before you configure the binder to invoke the service and display the result. To configure the binder, use the following code:
_onLoad: function (sender, args) {
this.get_binder().add_onItemCommand(this._binderCommandDelegate);
this.get_binder().DataBind();
},
To mark a particular image and save its URL after a user clicks the image, you use the following code:
_binderCommand: function (sender, args) {
if (args.get_commandName() == "selectImage") {
var imageUrl = args.get_dataItem().ThumbnailUrl;
var imageId = args.get_dataItem().Id;
this.set_selectedImageUrl(imageUrl);
this.set_selectedImageId(imageId);
// remove class from previously selected images
var selected = jQuery(args.get_itemElement().parentNode).find(".sf_selectedImage").each(function (index, element) {
jQuery(element).removeClass("sf_selectedImage");
});
// set class to currently selected image
jQuery(args.get_itemElement()).addClass("sf_selectedImage");
}
else if (args.get_commandName() == "selectAlbum") {
var selectedAlbumId = args.get_dataItem().Id;
this.get_binder().set_serviceBaseUrl(this._originalServiceBaseUrl + "parent/" + selectedAlbumId);
this.get_binder().set_skip(0);
this.get_binder().set_take(20);
var urlParams = [];
urlParams["itemType"] ="Telerik.Sitefinity.Libraries.Model.Image";
urlParams["provider"] = "";
this.get_binder().set_urlParams(urlParams);
this.get_binder().DataBind();
}
}
Binder commands enable you to instruct all client binders to execute a command with a particular name. You do this by specifying a special class in the markup of tag
content. As a result, when a user clicks on the tag, the
In addition, the binder passes you information about the particular item you are interested in.
Next, you need to handle the command and update the specific URL. Thus, the simple image selector completes its function.