使用UJS创建辅助标签

Question

首先，我为我的英语道歉。我是一个还在进步的巴西人。

我想创建一个名为"collection_cascading_select“的辅助标记。这个helper类似于"collection_select"，但他还有一个名为"source“的参数。"source“是视图中的另一个集合。

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

这就让人困惑了！我在这个问题上已经有一周的时间了，我的巴西兄弟们却没有帮助我。

谢谢!

编辑

@Samo

我得到了它的工作，但有一些变化。

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，当源下拉列表发生更改时，这些the将触发AJAX调用。

当然，你不需要这样做。您可以只使用一个collection_select，将一些属性添加到源下拉列表(即:class => 'source_for_dependent', :dependent => some_id)，然后在您的application.js中连接一些使用source_for_dependent类查找集合的JavaScript，当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响应作为参数。我们遍历响应，对于每个项目，我们创建一个option，从项目中提取值和文本，并将其附加到dependent下拉列表中。您的控制器可能如下所示：

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

编辑

你的目标是哪一个控制器取决于你。假设Dropdown A指向资源A，Dropdown B指向资源B。类型为A的对象应该有一个类型为B的对象列表。如果您要处理object A的show操作，那么object A的as_json方法需要包括它的B关联。This article展示了这方面的示例。

否则，您可以针对资源B执行index操作。让B成为A的嵌套资源是一种简单的方法，可以通过键控A的id来获取所有B类型的对象，这些对象都有一个指向A的外键。