Rails通過knockout.js提交表單

Question

我有一個Rails 3.2應用程序，我已經開始附加很多knockout.js綁定。我想以JSON格式提交表單到我的Rails服務器。

我有佔有量

= form_for(@tran, :html => {"data-bind" => "submit: submitTrans"}) do |f| 
    .field 
     = f.label :date 
     = f.date_select :date 
    .field 
     = f.label :voucher 
     = f.number_field :voucher 
    .field 
     = f.label :amount 
     = f.text_field :amount, "data-bind" => "value: amount, valueUpdate: 'afterkeydown', style: { background: amount() == 0 ? 'red' : 'white' }" 
    .field 
     = f.label :tax 
     = f.text_field :tax, "data-bind" => "value: tax" 
    .actions 
     = f.submit 'Save' 

這裏是我的淘汰賽代碼交易形式：

#= require knockout 

TranViewModel = -> 
    # Observables 
    self.amount = ko.observable("0") 

    # Computed values 
    self.tax = ko.computed(
    read: -> (self.amount()/10).toFixed 2 
    write: (value) -> value 
    owner: this) 


tranViewModel = new TranViewModel() 

# Submit through AJAX 
self.submitTrans = (formElement) -> 
    alert ko.toJSON(tranViewModel) 

# Apply keybindings on page load 
$(document).ready (event) -> 
    ko.applyBindings(tranViewModel) 

當我使用ko.toJSON這樣我得到「未定義」在返回我的警報箱。

我是否必須創建我的模型的實例？ 如何以JSON格式獲取我所有的表單屬性並將這些屬性發布到我的rails路由'/ transaction'中？

淘汰賽文檔描述了pushJSON的功能，但該網頁不存在了： http://knockoutjs.com/documentation/submit-binding.html

更新＃1

我試圖手動發送的JSON，這讓我創建一個對象

self.submitTrans = (formElement) -> 
    json = JSON.parse('{"tran": {"amount": "9999"}}') 
    $.post("/trans", json, (returnedData) -> 
    alert returnedData) 

更新＃2

我嘗試了一些事情，讓我的形式進入JSON使用提交$。員額

self.submitTrans = (formElement) -> 
    json = ko.toJSON(tranViewModel) 
    $.post("/trans", json, (returnedData) -> 
    alert returnedData) 

這回來爲未定義。我通過什麼傳遞給ko.toJSON？

更新＃3

我試過例如，從淘汰賽網站：

viewModel = 
    firstName : ko.observable("Bert"), 
    lastName : ko.observable("Smith"), 
    pets : ko.observableArray(["Cat", "Dog", "Fish"]), 
    type : "Customer" 

self.submitTrans = (formElement) -> 
    json = ko.toJSON(viewModel) 
    $.post("/trans", json, (returnedData) -> 
    alert returnedData) 

這正確格式視圖模型爲JSON。這是因爲viewModel是一個對象而不是函數。但是，如果我將TranViewModel從一個函數更改爲一個對象，這會打破我的很多綁定。這是設置我的綁定的正確方法？他們應該是在一個對象或功能？

更新＃4

我的例子： jsfiddle.net/p6Vcc/3 - 當點擊提交ko.toJSON不能收集所有formElements，我應該是增加可觀測到我的所有領域？

jsfiddle.net/p6Vcc/4 - 除了在coffeescript中重新編碼之外，與之前的示例相同，現在單擊提交時只顯示客戶的姓氏，而沒有其他字段。

Answer 1

更新1 所以看在的jsfiddle上面提供的咖啡腳本，有使用JavaScript由CoffeeScript中產生一個問題：

viewModel = __bind(function() { 
    this.firstName = ko.observable("Bert"); 
    return this.lastName = ko.observable("Smith"); 
    }, this); 

的CoffeeScript總是返回的最後一條語句，所以你必須在末尾添加@ 「重返這個」

viewModel = => 
    @firstName = ko.observable("Bert") 
    @lastName = ko.observable("Smith") 
    @ 

造成的javascript

viewModel = __bind(function() { 
    this.firstName = ko.observable("Bert"); 
    this.lastName = ko.observable("Smith"); 
    return this; 
    }, this); 

原來的答案

我不知道哪裏出現了麻煩。我把你的代碼放在jsfiddle中，它可以按預期工作。

http://jsfiddle.net/JasonMore/p6Vcc/2/

您可以更新小提琴，以反映您遇到的問題？

的Javascript

var viewModel = function() { 
    this.firstName = ko.observable("Bert"); 
    this.lastName =ko.observable("Smith"); 
    this.pets = ko.observableArray(["Cat", "Dog", "Fish"]); 
    this.type = "Customer"; 
}; 

var myViewModelInstance = new viewModel(); 

var jsonToPost = ko.toJSON(myViewModelInstance); 

//alert(jsonToPost); 

console.log(jsonToPost);