javascript - 使用 UJS 创建辅助标签

Question

首先，对不起我的英语。我是巴西人，还在进步。

我想创建一个名为“collection_cascading_select”的辅助标记。该助手类似于“collection_select”，但他还有一个名为“source”的参数。“源”是 View 中的其他集合。

一旦在“源”中选择了其他选项，就需要运行 JavaScript 函数来获取其值。然后填充同意该值的“collection_cascading_select”集合。

这让人困惑!我已经被这个问题困扰了一个星期，但我的巴西兄弟却没有帮助我。

谢谢!

[编辑]

@萨莫

我让它工作了，但做了一些改变。

var success = function(response) {

for (var item in response){

    var id = response[item].breed.id   <--------------------  
    var name = response[item].breed.name <-------------------  
    var option = $(document.createElement('option')).val(id).html(name)
    dependentDropDown.append(option)  
  }  
}

我不明白 FOR IN 是如何工作的。

Answer 1

听起来您正在寻找的答案是自定义表单生成器。您可以创建表单构建器并从 Rails 表单构建器继承，然后将该表单构建器设置为应用程序中的默认构建器。然后，您可以定义一个名为 dependent_dropdown 或 cascading_selection 等的元素。该元素可能会采用源下拉列表的 id。您的助手将输出一个 collection_select，但它也会输出一些 JavaScript，当源下拉列表更改时，这些 JavaScript 会触发 AJAX 调用。

当然，你不必这样做。您可以使用 collection_select，向源下拉列表中添加一些属性(即 :class => 'source_for_dependent', :dependent => some_id)，然后在您的 application.js 中连接一些 JavaScript查找具有 source_for_dependent 类的集合，当 onchange 事件触发时，它会从 dependent 属性中获取 id 并触发 AJAX 调用。

无论哪种方式，这里都是 JavaScript 的示例(使用 jQuery)

$('select.source_for_dependent').change(function() {
  var id = // get the id of the dependent dropdown, perhaps by $(this).attr('dependent')
  var dependentDropDown = $('#' + id);
  dependentDropDown.empty();
  var success = function(response) {
    for (var item in response) {
      var option = $(document.createElement('option')).val(item.val).html(item.text);
      dependentDropDown.append(option);
    }
  }

  $.get('/some_controller/some_action/' + $(this).val(), success);
}

成功处理程序被传递到 jQuery 的 get 方法中。它采用 JSON 响应作为参数。我们循环响应，并为每个项目创建一个选项，从该项目中提取值和文本，并将其附加到依赖的下拉列表中。您的 Controller 可能看起来像这样:

def some_action
  @obj = SomeClass.find(params[:id])
  respond_to do |format|
    format.js { render :json => @obj }
  end
end

编辑

您的目标 Controller 取决于您。假设下拉菜单 A 以资源 A 为目标，下拉菜单 B 以资源 B 为目标。A 类型的对象应该具有 B 类型的对象列表。如果您要执行对象 A 的 show 操作，则对象 A 的 as_json 方法需要包括其 B 关联。 This article显示了这方面的示例。

否则，您可以将 index 操作定位到资源 B。将 B 设为 A 的嵌套资源将是关闭 A 的 id 以获取 B 类型的所有对象的简单方法 具有指向 A 的外键。