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 route '/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 以便使用 $.post 提交

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)

这会正确地将 viewModel 格式化为 JSON。这是因为 viewModel 是一个对象而不是一个函数。但是，如果我将我的 TranViewModel 从一个函数更改为一个对象，这会破坏我的很多绑定。哪种是设置绑定的正确方法？它们应该在对象还是函数中？

更新 #4

我的例子： jsfiddle.net/p6Vcc/3 - 单击提交时，ko.toJSON 不会收集所有 formElements，我应该向所有字段添加 observable 吗？

jsfiddle.net/p6Vcc/4 - 与前面的示例相同，只是在咖啡脚本中重新编码，现在单击提交时仅显示客户的姓氏，而没有其他字段。

Answer 1

更新 1 所以看上面jsfiddle中提供的coffee脚本，coffeescript生成的javascript有问题：

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

Coffeescript 总是返回最后一条语句，所以你必须在末尾添加一个 @ 来“返回 this”

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

​