External Selector Engines

In its basic packaging, Bicycle Chain's $b() constructor and .add() method allow for single id selector ("#myId"), class (".myClass") and tag ("div"), not counting elements' arrays and DOM references (see docs here), while .get() method has it's own arguments (see getElements).

 

Anyway the library allows for external selectors engines to be used as extension of selector's capabilities. This is possible by binding the selector function to the $b.engine static property.

 

For example you may use the lightweight Peppy standalone engine like this:

 

<script language="javascript" type="text/javascript" src="bicycle-min.js"></script>
<script language="javascript" type="text/javascript" src="peppy.js"></script>
<script language="javascript" type="text/javascript">
$b.engine = peppy.query;
$b.ready(function () {
	var els= $b("ul#list li");
	alert(els.length());
});
</script>
 			

 

 

Or u can use jQuery's Sizzle:

 

<script language="javascript" type="text/javascript" src="bicycle-min.js"></script>
<script language="javascript" type="text/javascript" src="sizzle.js"></script>
<script language="javascript" type="text/javascript">
$b.engine = Sizzle;
$b.ready(function () {
	var els= $b("ul#list li"); // No context right now, sorry...
	alert(els.length());
});
</script>
 			

 

Engine binding will only works on string-type arguments, making it possible to pass even elements's Arrays and DOM references:

 

<script language="javascript" type="text/javascript" src="bicycle-min.js"></script>
<script language="javascript" type="text/javascript" src="peppy.js"></script>
<script language="javascript" type="text/javascript">
$b.engine = Sizzle;
$b.ready(function () {
	var els= $b("ul#list li",document.getElementById("myId"));
	alert(els.length());
});
</script>
 			

---