2013-01-21 62 views
4

我有一個任務在軌道上使用ruby做knockout.js。我想將javascript值發送給控制器。 我index.html.erb是如何將JavaScript值作爲json對象傳遞給rails上的控制器?

<%= javascript_include_tag "knockout-2.2.0","country-state" %> 
<table> 
    <thead> 
     <tr> 
      <th>Country</th> 
      <th>State</th> 
      <th> </th> 
     </tr> 
    </thead> 
    <tbody data-bind='foreach: lines'> 
     <tr> 
      <td> 
       <select data-bind='options: sampleProductCategories, optionsText: "country", optionsCaption: "Select...", value: category'> </select> 
      </td> 
      <td data-bind="with: category"> 
       <select data-bind='options: products, optionsText: "country", optionsCaption: "Select...", value: $parent.product'> </select> 
      </td> 



      <td> 
       <a href='#' data-bind='click: $parent.removeLine'>Remove</a> 
      </td> 
     </tr> 
    </tbody> 
</table> 

<button data-bind='click: addLine'>Add</button> 
<button data-bind='click: save'>Submit</button> 

<script> 
$(document).ready(function() { 
function formatCurrency(value) { 
    return "$" + value.toFixed(2); 
} 

var CartLine = function() { 
    var self = this; 
    self.category = ko.observable(); 
    self.product = ko.observable(); 

    self.subtotal = ko.computed(function() { 
     return self.product() ? self.product().price * parseInt("0" + self.quantity(), 10) : 0; 
    }); 

    // Whenever the category changes, reset the product selection 
    self.category.subscribe(function() { 
     self.product(undefined); 
    }); 
}; 

var Cart = function() { 
    // Stores an array of lines, and from these, can work out the grandTotal 
    var self = this; 
    self.lines = ko.observableArray([new CartLine()]); // Put one line in by default 
    self.grandTotal = ko.computed(function() { 
     var total = 0; 
     $.each(self.lines(), function() { total += this.subtotal() }) 
     return total; 
    }); 

    // Operations 
    self.addLine = function() { self.lines.push(new CartLine()) }; 
    self.removeLine = function(line) { self.lines.remove(line) }; 
    self.save = function() { 
     var dataToSave = $.map(self.lines(), function(line) { 
      return line.product() ? { 
       state: line.product().country 
      } : undefined 
     }); 
     alert("Could now send this to server: " + JSON.stringify(dataToSave)); 
     $.ajax({ 
    url: '/employees/<%[email protected]%>', 
    dataType: 'json', 
    async: false, 
    method:'PUT', 
    data:dataToSave, 
    success: function(data) { 

    } 
    }); 
    }; 
}; 

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

在它顯示像

Started GET "/employees/1?undefined=undefined" for 127.0.0.1 at Mon Jan 21 13:36:15 +0530 2013 
Processing by EmployeesController#show as JSON 
    Parameters: {"id"=>"1", "undefined"=>"undefined"} 

如何選擇狀態和國家發送到控制器作爲JSON對象的終端?

回答

5

剛剛嘗試這一點。

$.ajax({ 
     url:'/employees/<%[email protected]%>', 
     dataType: 'json', 
     data: { passval: dataToSave}, 
     success: function(msg) 
      { 

      } 
     }); 

您可以使用Ajax頁面變量passval檢索的dataTosave值,
和可變msg將返回從AJAX的響應。

1

任何ajax http調用都可以。

$.ajax({ 
    url: myUrl, 
    dataType: 'json', 
    async: false, 
    data: myData, 
    success: function(data) { 
    //stuff 
    } 
}); 

$.getJSON(muUrl, myData, function(data) { 
    //stuff 
}); 
相關問題