2013-02-07 15 views
0

我有一個任務,使用軌道上的紅寶石knockout.js。我的實際HTML代碼是如何在rails上設置ruby中的select標籤?

<%= javascript_include_tag "knockout-2.2.0","country-state" %> 
<%= form_for(@employee) do |f| %> 
    <% if @employee.errors.any? %> 
    <div id="error_explanation"> 
     <h2><%= pluralize(@employee.errors.count, "error") %> prohibited this employee from being saved:</h2> 

     <ul> 
     <% @employee.errors.full_messages.each do |msg| %> 
     <li><%= msg %></li> 
     <% end %> 
     </ul> 
    </div> 

    <% end %> 

<table> 
    <thead> 
     <tr> 

      <th>Country</th> 
      <th>State</th> 
      <th> </th> 
     </tr> 
    </thead> 
    <tbody data-bind='foreach: lines'> 
     <tr> 
      <td> 
       <select data-bind='options: sampleStateCountry,optionsCaption: "select", optionsText: "country", value: country'> </select> 
      </td> 
      <td data-bind="with: country"> 
       <select data-bind='options: state, optionsText: "state", optionsCaption: "select", value: $parent.state'> </select> 
      </td> 
     </tr> 
    </tbody> 
</table> 

<button data-bind='click: save'>Submit</button> 
<% end %> 

<script> 
$(document).ready(function() { 

var location = function() { 
    var self = this; 
    self.country = ko.observable(); 
    self.state = ko.observable(); 
}; 

var map = function() { 

    var self = this; 
    self.lines = ko.observableArray([new location()]); 
    self.save = function() { 
     var dataToSave = $.map(self.lines(), function(line) { 
      return line.state() ? { 
       state: line.state().state, 
       country: line.country().country 
      } : undefined 
     }); 

     alert("Could now send this to server: " + JSON.stringify(dataToSave)); 

     $.ajax({ 
     url: '/employees/<%[email protected]%>', 
     dataType: 'json', 
     //async: false, 
     //contentType: 'application/json', 
     type: 'PUT', 
     data: {total_changes: JSON.stringify(dataToSave)}, 
     //data:JSON.stringify(dataToSave), 
     //data:dataToSave, 
     success: function(data) { 
      alert("Successful"); 
      }, 
      failure: function() { 
      alert("Unsuccessful"); 
      } 
     }); 
    }; 
}; 

ko.applyBindings(new map()); 
}); 
</script> 

但我想這樣設置在紅寶石這樣。

<%= form_for(@employee) do |f| %> 
    <% if @employee.errors.any? %> 
    <div id="error_explanation"> 
     <h2><%= pluralize(@employee.errors.count, "error") %> prohibited this employee from being saved:</h2> 

     <ul> 
     <% @employee.errors.full_messages.each do |msg| %> 
     <li><%= msg %></li> 
     <% end %> 
     </ul> 
    </div> 
    <% end %> 

<div class='label'> 
     <%= f.label :country %><br /> 
     <%= f.text_field :country %> 
    </div> 
    <div class="field"> 
    <%= f.label :state %><br /> 
    <%= f.text_field :state %> 
    </div> 
    <div class="actions"> 
    <%= f.submit %> 
    </div> 
    <% end %> 

這是一個例子。我如何將它設置爲ruby代碼進行編輯?

+0

我不完全理解你的問題。你想知道,你如何把這兩塊拼在一起? – rausch

+0

希望你明白..我想在編輯國家和州時設置下拉菜單。編輯頁面來自索引頁面。所以下拉菜單中必須有一個默認值。如何將其設置爲下拉菜單? – Niths

回答

0

你可以使用options_from_collection_for_select幫手,它會是這個樣子:

f.select(:country_id, options_from_collection_for_select(@countries, :id, :name, @selected_country_id), {:include_blank => 'Select a Country'},{:onchange=>"alert('foo')"}) 

我認爲這是最好設置在@countries控制器,而不是有在視圖中Country.all。必須將@selected_country_id設置爲您實際想要選擇的內容。

documentation here有一些選擇可以設置選定的選項。

+0

其實國家和國家的價值觀來自一個JavaScript .. – Niths

+0

好吧,那麼你將不得不添加'選擇'屬性的'選項'標籤,應該顯示爲默認選擇我認爲 –

+0

對不起,我沒有得到你..你能分享一個例子嗎? – Niths