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);