MooTools and CanJS 2.1

[Justin Meyer]

MooTools users,

  

Long story short, I'm spending a lot of time making some pretty awesome features of CanJS 2.1 work with MooTools. I want to know if this interests people.

The long story ....

I'm not sure if many MooTools users know this, but CanJS can be run on top of MooTools. It means that CanJS uses MooTools internally for things like event binding, DOM manipulation, etc so they work together very nicely.  For example, a removing an element like: 

$("tools").destroy();

Will clean up any control on the tools element.

CanJS 2.0 added the ability to operate on custom tags, but only within a template.  CanJS 2.1 is supporting custom tags outside a template, but also a lot of DOM modification events. You will be able to listen to when an element is inserted / removed or any of its attributes change like:

$(div).addEvent("attributes", function(ev){
	equal( ev.attributeName, "foo" );
	equal( ev.target, div)
	equal( ev.oldValue, null);
	equal( div.getAttribute(ev.attributeName), "bar");
	$(div).removeEvent("attributes", arguments.callee )
});
$(div).set("foo", "bar")

This means you will be able to create custom elements that behave very similar to native elements in all browsers that MooTools supports (IE8 :-) AND you can operate on them with your favorite MooTool methods.

Consider a very basic HelloWorld example, an element that looks like:

<hello-world message="Hello" id="moo"></hello-world>

A hello world element simply puts the message attribute's value inside an H1 element.  You'd implement this like:

can.Component.extend({

  tag: "hello-world",

  template: "<h1>{{message}}</h1>"

  scope: {

    message: "@"

  }

})

If you were to use MooTool's set method to update the message attribute like:

$("moo").set("message","MooTools says Hi!")

The text inside the H1 would update automatically.

This will bring a lot of the WebComponent goodness to MooTools far earlier than a polyfill like Polymer.  We essentially poly-filled MooTools.  My hope is that this interests the MooTools community.  Let me know what you think.  Thanks!

[Sérgio Crisóstomo]

Hi Justin!

I see you are involved in the CanJS team.

Nice to know CanJS and Mootools works good together!

+1 

[Sanford Whiteman]

> My hope is that this interests the MooTools community.

Yes. Yes it does.

Well, me at least! Thanks for posting.

-- S.

[utan]

+1

regards