How to use the can/util/util.$ function in can

}
});

var makeAgeUpdater = function(contact){
	var updater = $("#update")
	updater.html("");
	updater.append(contact.name+"'s birthday");

	can.$('<input type="text">').val(
		contact.getBirthday())
	.change(function(){
		contact.attr('birthday', this.value);
	}).appendTo(updater);
}

can.$('#contacts').delegate("li","click", function(){
	makeAgeUpdater( can.$(this).data('model') );
});

Contact.findAll({},function(contacts){
  var contactsEl = can.$('#contacts');
  can.each(contacts, function(contact){

	// add the contact to the page
	var li = can.$('<li>')
              .data('model', contact)
              .html(contact.name + " "+
					contact.ageThisYear() +
					" <a>Show</a>")
              .appendTo(contactsEl);

	// listen for changes in birthday</li>

lexicalContent = ((typeof this.leakScope === "undefined" ?
						false :
						!this.leakScope) &&
					!!this.template),

				// the object added to the scope
				viewModel,
				frag,
				// an array of teardown stuff that should happen when the element is removed
				teardownFunctions = [],
				callTeardownFunctions = function() {
					for (var i = 0, len = teardownFunctions.length; i < len; i++) {
						teardownFunctions[i]();
					}
				},
				$el = can.$(el),
				setupBindings = !can.data($el, "preventDataBindings");

			// ## Scope

			// Add viewModel prototype properties marked with an "@" to the `initialViewModelData` object
			can.each(this.constructor.attributeScopeMappings, function(val, prop) {
				initialViewModelData[prop] = el.getAttribute(can.hyphenate(val));
			});

			if (setupBindings) {
				teardownFunctions.push(bindings.behaviors.viewModel(el, componentTagData, function(initialViewModelData) {

					// Make %root available on the viewModel.
					initialViewModelData["%root"] = componentTagData.scope.attr("%root");

					// Create the component's viewModel.

Contact.findAll({},function(contacts){
  var contactsEl = can.$('#contacts');
  can.each(contacts, function(contact){

	// add the contact to the page
	var li = can.$('<li>')
              .data('model', contact)
              .html(contact.name + " "+
					contact.ageThisYear() +
					" <a>Show</a>")
              .appendTo(contactsEl);

	// listen for changes in birthday
	contact.bind("birthday", function(){
      li.html(contact.name + " " +
			  this.ageThisYear() +
			  " <a>Show</a>");
    })</li>

can.each(contacts, function(contact){

	// add the contact to the page
	var li = can.$('<li>')
              .data('model', contact)
              .html(contact.name + " "+
					contact.ageThisYear() +
					" <a>Show</a>")
              .appendTo(contactsEl);

	// listen for changes in birthday
	contact.bind("birthday", function(){
      li.html(contact.name + " " +
			  this.ageThisYear() +
			  " <a>Show</a>");
    })

	// backup the contact
	contact.backup();
  })</li>

}
				});
			} else {
				// new expression data
				var getHash = attrInfo.hash(tagData.scope, tagData.options, {});
				can.each(getHash(), function(val, key) {
					hash[key] = convertToValue(val);
				});
			}

			var promise = connection[method](hash);
			addToPageData(hash, promise);
			return promise;
		});

		can.data(can.$(el), "viewModel", request);

		var nodeList = can.view.nodeLists.register([], undefined, true);

		var frag = tagData.subtemplate ?
					tagData.subtemplate( tagData.scope.add(request), tagData.options, nodeList ) :
					document.createDocumentFragment();

		// Append the resulting document fragment to the element
		can.appendChild(el, frag);

		// update the nodeList with the new children so the mapping gets applied
		can.view.nodeLists.update(nodeList, el.childNodes);

		// add to pageData

		can.one.call(el, 'removed', function() {

" <a>Show</a>")
              .appendTo(contactsEl);

	// listen for changes in birthday
	contact.bind("birthday", function(){
      li.html(contact.name + " " +
			  this.ageThisYear() +
			  " <a>Show</a>");
    })

	// backup the contact
	contact.backup();
  })

  // on restore, update all contacts
  can.$("#restore").click(function(){
    contacts.each(function(){
		this.restore()
	});
	$('#update').html('');
  });
});

replace: function (oldElements, newFrag) {
		// The following helps make sure that a selected <option> remains
		// the same by removing `selected` from the currently selected option
		// and adding selected to an option that has the same value.
		var selectedValue,
			parentNode = oldElements[0].parentNode;

		if(parentNode.nodeName.toUpperCase() === "SELECT" &amp;&amp; parentNode.selectedIndex &gt;= 0) {
			selectedValue = parentNode.value;
		}


		elements.after(oldElements, newFrag);
		if(can.remove(can.$(oldElements)).length &lt; oldElements.length &amp;&amp; !selectsCommentNodes) {
			can.each(oldElements, function(el) {
				if(el.nodeType === 8) {
					el.parentNode.removeChild(el);
				}
			});
		}
		if(selectedValue !== undefined) {
			parentNode.value = selectedValue;
		}
	}
};</option>

var selectsCommentNodes = doc && (function(){
	return can.$(document.createComment('~')).length === 1;
})();

can.$('#contacts').delegate("li","click", function(){
	makeAgeUpdater( can.$(this).data('model') );
});

can.each(elems, function (elem) {
		can.$(elem)
			.triggerHandler("removed");
	});
	oldClean(elems);