Rails 3.1 咖啡脚本

Question

我有一个奇怪的失败的咖啡脚本，from this demo。演示代码在我的本地机器上运行良好。而且我已经公然将它批量复制到我自己的 rails 3.1 应用程序中。没有有用的错误消息，但按钮的行为就好像它们是不知道它们附加了脚本的按钮 - 它们正在刷新页面。

app/assets/application.js 包含已编译的咖啡脚本。 两个应用程序之间编译的 html 是相同的。 其他javascripts正在工作。 我已经删除了除此之外的所有 css 和 javascript，但它无法正常工作。 咖啡脚本很好，因为它正在我机器上的演示应用程序上运行。

我是否遗漏了一些关于您如何在资产管道中使用咖啡脚本的明显内容？

代码：

应用程序.rb：

   # Enable the asset pipeline
    config.assets.enabled = true

Search.js.coffee：

class @Search
  constructor: (@templates = {}) ->

  remove_fields: (button) ->
    $(button).closest('.fields').remove()

  add_fields: (button, type, content) ->
    new_id = new Date().getTime()
    regexp = new RegExp('new_' + type, 'g')
    $(button).before(content.replace(regexp, new_id))

  nest_fields: (button, type) ->
    new_id = new Date().getTime()
    id_regexp = new RegExp('new_' + type, 'g')
    template = @templates[type]
    object_name = $(button).closest('.fields').attr('data-object-name')
    sanitized_object_name = object_name.replace(/\]\[|[^-a-zA-Z0-9:.]/g, '_').replace(/_$/, '')
    template = template.replace(/new_object_name\[/g, object_name + "[")
    template = template.replace(/new_object_name_/, sanitized_object_name + '_')
    $(button).before(template.replace(id_regexp, new_id))

应用助手：

 def setup_search_form(builder)
      fields = builder.grouping_fields builder.object.new_grouping, object_name: 'new_object_name', child_index: "new_grouping" do |f|
        render('grouping_fields', f: f)
      end
      content_for :document_ready, %Q{
        var search = new Search({grouping: "#{escape_javascript(fields)}"});
        $('button.add_fields').live('click', function() {
          search.add_fields(this, $(this).data('fieldType'), $(this).data('content'));
          return false;
        });
        $('button.remove_fields').live('click', function() {
          search.remove_fields(this);
          return false;
        });
        $('button.nest_fields').live('click', function() {
          search.nest_fields(this, $(this).data('fieldType'));
          return false;
        });
      }.html_safe
    end

    def button_to_remove_fields(name, f)
      content_tag :button, name, class: 'remove_fields'
    end

    def button_to_add_fields(name, f, type)
      new_object = f.object.send "build_#{type}"
      fields = f.send("#{type}_fields", new_object, child_index: "new_#{type}") do |builder|
        render(type.to_s + "_fields", f: builder)
      end
      content_tag :button, name, :class => 'add_fields', 'data-field-type' => type, 'data-content' => "#{fields}"
    end

    def button_to_nest_fields(name, type)
      content_tag :button, name, :class => 'nest_fields', 'data-field-type' => type
    end

advanced_search.html.erb

<h1>Advanced ISBN Search</h1>
<%= link_to 'Simple mode', isbns_path %>

<%= search_form_for @search, url: advanced_search_isbns_path, html: {method: :post} do |f| %>
  <% setup_search_form f %>

  <fieldset>
    <legend>Sorting</legend>
    <%= f.sort_fields do |s| %>
      <%= render 'sort_fields', f: s %>
    <% end %>
    <%= button_to_add_fields "Add Sort", f, :sort %>
  </fieldset>

  <fieldset>
    <legend>Condition Groups</legend>
    <%= f.grouping_fields do |g| %>
      <%= render 'grouping_fields', f: g %>
    <% end %>
    <%= button_to_add_fields "Add Condition Group", f, :grouping %>
  </fieldset>

  <%= label_tag :distinct, 'Return distinct records?' %>
  <%= check_box_tag :distinct, '1', params[:distinct].to_i == 1 %>
  <%= f.submit %>
<% end %>

<%= render 'results' %>

部分示例：_grouping_fields.html.erb

<fieldset class="fields" data-object-name="<%= f.object_name %>">
  <legend>Match <%= f.combinator_select %> conditions <%= button_to_remove_fields "remove", f %></legend>
  <%= f.condition_fields do |c| %>
    <%= render 'condition_fields', f: c %>
  <% end %>
  <%= button_to_add_fields "Add Condition", f, :condition %>

  <%= f.grouping_fields do |g| %>
    <%= render 'grouping_fields', f: g %>
  <% end %>
  <%= button_to_nest_fields "Add Condition Group", :grouping %>
</fieldset>

更新/解决方案。

Firebug 指出与 Cocoon gem 中的其他一些 js 存在冲突。这是它的代码：

 $('.add_fields').live('click', function() {
    var assoc   = $(this).attr('data-association');
    var assocs  = $(this).attr('data-associations');
    var content = $(this).attr('data-template');
    var insertionPosition = $(this).attr('data-association-insertion-position');
    var insertionNode = $(this).attr('data-association-insertion-node');
    var insertionCallback = $(this).data('insertion-callback');
    var regexp_braced = new RegExp('\\[new_' + assoc + '\\]', 'g');
    var regexp_underscord = new RegExp('_new_' + assoc + '_', 'g');
    var new_id  = new Date().getTime();
    var newcontent_braced = '[' + new_id + ']';
    var newcontent_underscord = '_' + new_id + '_';
    var new_content = content.replace(regexp_braced, '[' + new_id + ']');
    if (new_content == content) {
        regexp_braced = new RegExp('\\[new_' + assocs + '\\]', 'g');
        regexp_underscord = new RegExp('_new_' + assocs + '_', 'g');
        new_content = content.replace(regexp_braced, '[' + new_id + ']');
    }
    new_content = new_content.replace(regexp_underscord, newcontent_underscord);

    if (insertionNode) {
      insertionNode = $(insertionNode);
    }
    else {
      insertionNode = $(this).parent();
    }

    var contentNode = $(new_content);

    if (insertionPosition == 'after'){
      insertionNode.after(contentNode);
    } else {
      insertionNode.before(contentNode); 
    }

    if(insertionCallback){
      insertionCallback.call(contentNode);
    }

    return false;
  });

冲突的行是

var new_content = content.replace(regexp_braced, '[' + new_id + ']');

在 application_helper 中将 add_fields 重命名为 add_s_fields，coffeescript 将其整理出来。

Answer 1

你注入一些 JS 代码

content_for :document_ready %Q{ ... }

但我没有看到必需的

<%= content_for :document_ready %>

在您的 ERB 标记中。你能验证JS代码在页面上吗？如果是这样，它在哪里——你确定它是在定义 class @Search 之后运行的吗？

Answer 2

class @Search 对我来说很可疑。如果你去掉 @ 会发生什么？