More Ractive wrappers for jQueryUI

Over the last week or so, I’ve managed to write a pretty complex single-pag webapp with Ractive, using jQueryUI widgets for some of the GUI elements. I like the Ractive framework a great deal and find that it will meet my development needs very nicely, and can be made to work with jQueryUI effectively.

In order to help out others who wish to explore this alternative, I’m providing some Ractive wrappers I’ve developed for using jQueryUI widgets within my web app — and I wish to thank the generous assistance of Marty Nelson in helping me figure out some non-trivial details.

Here’s how I’ve implemented jQueryUI icon buttons:

Ractive.decorators.iconButton = function (node, icon) {
	jQuery(node).button({
		text: false,
		icons: { primary: icon }
	});
	return {
		teardown: function () {
			jQuery(node).button('destroy');
		}
	}
};

It’s very easy to use this in a Ractive template. For example,

<button decorator="iconButton:ui-icon-wrench" on-click="doEdit">Edit</button>

I also use the Iris color picker in my webapp (which will eventually be inserted into a WordPress plugin), so I’ve created a very simple Ractive component for it. Here’s the HTML template and the JavaScript (sorry about WordPress’s destructive formatting):

<script id="iris-r-template" type='text/ractive'>
 <input class="jq-iris-template" type="text" size="11" value="{{color}}"/>
</script>

var RJIrisColor = Ractive.extend({
 template: '#iris-r-template',
 data: function() {
 return {
 color: '' // the selected color
 }
 }, // data
 onrender: function() {
 var self = this;
 var thisComponent = this.find('.jq-iris-template');

 jQuery(thisComponent).iris({
 width: 200,
 hide: false,
 palettes: true,
 change: function(event, ui) {
 self.set('color', ui.color.toString());
 }
 });
 }, // onrender()

 // Intercept teardown to create jQueryUI component
 onteardown: function () {
 var thisComponent = this.find('.jq-iris-template');
 jQuery(thisComponent).iris('destroy');
 } // onteardown()
});

As I’ve grumbled before, the equivalent Angular markup and code is painful to write and look at. This uses the RJDialogComponent that I provided in my previous blog entry. The template and code to create and use the Iris color picker dialog looks (minimally) like this:

<script id="dialog-choose-color" type='text/ractive'>
 <dialog title="Choose Color" width="250" height="330">
 <iris color="{{color}}"></iris>
 </dialog>
</script>

	colorPicker = new Ractive({
		el: '#insert-dialog',
		template: '#dialog-choose-color',
		data: {
			color: theColor
		},
		components: {
			dialog: RJDialogComponent,
			iris: RJIrisColor
		}
	}); // new Ractive()
	colorPicker.on('dialog.ok', function(evt) {
		var finalColor = colorPicker.get('color');
// Do something with finalColor
		colorPicker.teardown();
	});
	colorPicker.on('dialog.cancel', colorPicker.teardown);

That’s about as simple, readable and efficient as you’re going to get in a JavaScript framework, IMO.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s