jQuery UI + Rails

Question

我在我的站点上的haml文件中有以下代码：

= stylesheet_link_tag "web-app-theme/base2", "web-app-theme/themes/activo/style", "web-app-theme/override", 'web-app-theme/tabs'
= javascript_include_tag 'tabber.js', 'jquery-1.3.2.min.js', 'jquery-ui-1.7.custom.min.js'
:javascript
  $(function() {

    var $tabs = $('#tabs').tabs();

    $(".ui-tabs-panel").each(function(i){

      var totalSize = $(".ui-tabs-panel").size() - 1;

      if (i != totalSize) {
          next = i + 2;
          $(this).append("Next Page »");
      }

      if (i != 0) {
          prev = i;
          $(this).append("« Prev Page");
      }

    });

    $('.next-tab, .prev-tab').click(function() { 
             $tabs.tabs('select', $(this).attr("rel"));
             return false;
         });


  });
#page-wrap
  #tabs
    %ul
      %li
        %a{:href => "#fragment-1"} 1
      %li
        %a{:href => "#fragment-2"} 2
      %li
        %a{:href => "#fragment-3"} 3
      %li
        %a{:href => "#fragment-4"} 4
      %li
        %a{:href => "#fragment-5"} 5
      %li
        %a{:href => "#fragment-6"} 6
      %li
        %a{:href => "#fragment-7"} 7
      %li
        %a{:href => "#fragment-8"} 8
      %li
        %a{:href => "#fragment-9"} 9
      %li
        %a{:href => "#fragment-10"} 10
      %li
        %a{:href => "#fragment-11"} 11
      %li
        %a{:href => "#fragment-12"} 12
      %li
        %a{:href => "#fragment-13"} 13
      %li
        %a{:href => "#fragment-14"} 14
      %li
        %a{:href => "#fragment-15"} 15
    #fragment-1.ui-tabs-panel
      %p Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
    #fragment-2.ui-tabs-panel.ui-tabs-hide
      %p Donec ultricies senectus tristique egestas vitae, et ac morbi habitant quam sit mi quam, malesuada leo. Vestibulum tempor Mauris tortor libero eget, egestas. eu vitae feugiat netus amet Pellentesque ante. amet, ultricies eleifend turpis sit placerat et semper. Aenean est. fames
    #fragment-3.ui-tabs-panel.ui-tabs-hide
      %p ante. Mauris Vestibulum est. fames egestas quam, leo. amet tristique sit libero egestas. ultricies mi turpis senectus Pellentesque habitant eu ac morbi netus eget, Aenean malesuada vitae, semper. eleifend et feugiat vitae amet, placerat Donec et tortor ultricies tempor quam sit
    #fragment-4.ui-tabs-panel.ui-tabs-hide
    #fragment-5.ui-tabs-panel.ui-tabs-hide
    #fragment-6.ui-tabs-panel.ui-tabs-hide
    #fragment-7.ui-tabs-panel.ui-tabs-hide
    #fragment-8.ui-tabs-panel.ui-tabs-hide
    #fragment-9.ui-tabs-panel.ui-tabs-hide
    #fragment-10.ui-tabs-panel.ui-tabs-hide
    #fragment-11.ui-tabs-panel.ui-tabs-hide
    #fragment-12.ui-tabs-panel.ui-tabs-hide
    #fragment-13.ui-tabs-panel.ui-tabs-hide
    #fragment-14.ui-tabs-panel.ui-tabs-hide
    #fragment-15.ui-tabs-panel.ui-tabs-hide
      %p The end.

代码很好，因为它创建了正确的选项卡界面，但是按钮不起作用，它们只是以文本的形式出现，所以我想知道是否应该做些什么来让javascript正常工作？我尝试删除haml文件中的javascript代码并将其放入application.js中：

// This is a manifest file that'll be compiled into including all the files listed below.
// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
// be included in the compiled file accessible from http://example.com/assets/application.js
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
//= require jquery
//= require jquery_ujs
//= require_tree .
$(function() {

var $tabs = $('#tabs').tabs();

$    (".ui-tabs-panel").each(function(i){

  var totalSize = $(".ui-tabs-panel").size() - 1;

  if (i != totalSize) {
      next = i + 2;
      $(this).append("Next Page »");
  }

  if (i != 0) {
      prev = i;
      $(this).append("« Prev Page");
  }

});

$('.next-tab, .prev-tab').click(function() { 
         $tabs.tabs('select', $(this).attr("rel"));
         return false;
     });


});

这只会导致选项卡布局中断，不再正常工作。

Answer 1

所以问题是来自jquery站点的原始代码都是html -当它转换成haml时，它也从javascript部分删除了html。这随后中断了javascript链接的正常工作。学到的教训不要通过haml2html运行javascript。