Using #{...} in tabTemplate leads to errors in Ruby (on Rails)

Since ruby uses "#{variable}" to substitute a variable value in a sring, this interferes with jQuery tab syntax and leads to errors.

Example code (taken from original demo/manipulation.html and converted to haml syntax):

%style{:type => "text/css", :media => "screen"}
  :plain
    #dialog label, #dialog input { display:block; }
    #dialog label { margin-top: 0.5em; }
    #dialog input, #dialog textarea { width: 95%; }
    #tabs { margin-top: 1em; }
    #tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
    #add_tab { cursor: pointer; }

:javascript
  $(function() {
    var $tab_title_input = $('#tab_title'), $tab_content_input = $('#tab_content');
    var tab_counter = 2;
    
    // tabs init with a custom tab template and an "add" callback filling in the content
    var $tabs = $('#tabs').tabs({
      tabTemplate: '<li><a href="#{href}">#{label}</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>',
      add: function(event, ui) {
        var tab_content = $tab_content_input.val() || 'Tab '+tab_counter+' content.';
        $(ui.panel).append('<p>'+tab_content+'</p>');
      }
    });
    
    // modal dialog init: custom buttons and a "close" callback reseting the form inside
    var $dialog = $('#dialog').dialog({
      autoOpen: false,
      modal: true,
      buttons: {
        'Add': function() {
          addTab();
          $(this).dialog('close');
        },
        'Cancel': function() {
          $(this).dialog('close');
        }
      },
      open: function() {
        $tab_title_input.focus();
      },
      close: function() {
        $form[0].reset();
      }
    });
    
    // addTab form: calls addTab function on submit and closes the dialog
    var $form = $('form',$dialog).submit(function() {
      addTab();
      $dialog.dialog('close');
      return false;
    });
    
    // actual addTab function: adds new tab using the title input from the form above
    function addTab() {
      var tab_title = $tab_title_input.val() || 'Tab '+tab_counter;
      $tabs.tabs('add', '#tabs-'+tab_counter, tab_title);
      tab_counter++;
    }
    
    // addTab button: just opens the dialog
    $('#add_tab')
      .button()
      .click(function() {
        $dialog.dialog('open');
      });
    
    // close icon: removing the tab on click
    // note: closable tabs gonna be an option in the future - see http://dev.jqueryui.com/ticket/3924
    $('#tabs span.ui-icon-close').live('click', function() {
      var index = $('li',$tabs).index($(this).parent());
      $tabs.tabs('remove', index);
    });
  });

Leads to the error message:

undefined local variable or method `href' for #<ActionView::Base:0x6172400>

So for ruby and rails it's needed to change the syntax.