使用紅寶石「建立」動態地與jQuery在導軌

Question

得到具有形式（新的動作）一導軌應用與從1選項值範圍內的選擇，以5。當用戶選擇的我需要使用的一個選項ruby「build」根據選擇值是什麼構建一些對象。

因此，當用戶在選擇框選擇2下面的代碼需要運行：

@rooms = 2.times { @travel.rooms.build } 

同樣，當用戶從2變爲1這個值需要與

@rooms = 1.times { @travel.rooms.build } 

被替換的代碼

基本上我無法找到一種方法來設置jQuery中的值，然後在html更新它。獲得價值是沒有問題的，它是如何在HTML中動態地改變它的問題。

就如何處理這個進行任何提示？

感謝， Amund

編輯 - 澄清

我需要提交表單之前做到這一點。

@rooms = 2.times { @travel.rooms.build } 

因此，當用戶在表單頁面上時，上述任何變化都需要發生。

Answer 1

我發現一個可行的辦法，雖然它不是漂亮，也不如果用戶沒有JS它的工作（在我的情況下，如果用戶沒有JS他們可以GTFO）。

下面是需要爲它工作的代碼。 （請記住這是有效的，但我沒有做任何事情來使它更簡潔或更好）。 PS。它看起來像地獄。

$('#room_details .fields').hide(); 
$('#room_details .fields:eq(0)').show(); 
$('.fields:eq(0)').find('.is_wanted').val("true"); 
$('#number_of_rooms').change(function() { 
$('#room_details .fields').hide(); 
$('.is_wanted').val(""); 
if($(this).val() == '1') { 
    $(".fields:eq(0)").each(function() { 
    $(this).show(); 
    $(this).find('.is_wanted').val("true"); 
    }); 
} 
else if ($(this).val() == '2'){ 
    $(".fields:eq(0), .fields:eq(1)").each(function() { 
    $(this).show(); 
    $(this).find('.is_wanted').val("true"); 
    }); 
} 
else if ($(this).val() == '3'){ 
    $(".fields:eq(0), .fields:eq(1), .fields:eq(2)").each(function() { 
    $(this).show(); 
    $(this).find('.is_wanted').val("true"); 
    }); 
} 
else if ($(this).val() == '4'){ 
    $(".fields:eq(0), .fields:eq(1), .fields:eq(2), .fields:eq(3)").each(function() { 
    $(this).show(); 
    $(this).find('.is_wanted').val("true"); 
    }); 
} 
else if ($(this).val() == '5'){ 
    $(".fields:eq(0), .fields:eq(1), .fields:eq(2), .fields:eq(3), .fields:eq(4)").each(function() { 
    $(this).show(); 
    $(this).find('.is_wanted').val("true"); 
    }); 
} 
}); 

然後在模型中，我們做到：

accepts_nested_attributes_for :rooms, :allow_destroy => true, :reject_if => proc { |attrs| attrs['is_wanted'].blank? } 

凡is_wanted的形式是爲每個房間隱藏字段。我相信有更漂亮的方法，但至少它有效。

有什麼想法？

Answer 2

我不知道，如果你需要幫助的Ruby或jQuery的幫助？好吧，無論如何，這裏有一些Ruby。我只包括良好的措施中輸入驗證：

count = (params[:number_of_rooms] || 1).to_i 
count = [1, [5, count].min].max 
@rooms = (0...count).collect { @travel.rooms.build } 

---

我不傾向於寫JS的解決方案，但在一般情況下，你添加的觀察員選擇字段，然後通過添加字段創建HTML DOM元素。假設你已經有一個在頁面上構建的表單，你可以做一些技巧來克隆這些字段來創建額外的字段。另一種方法是始終有5組字段，只顯示/隱藏你需要的字段集合。祝你好運！