knockout.jsからフォームを送信しているメール

Question

私はたくさんのknockout.jsバインディングを添付し始めたRails 3.2アプリを持っています。 JSON形式のフォームをRailsサーバーに送信したいと思います。私は「未定義」を取得このようko.toJSONを使用していたときに

#= 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) 

返さ：

は、私は私のノックアウトコードされる量ここで

= 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' 

を持って取引形態を持っています私の警告ボックス。

モデルのインスタンスを作成する必要はありますか？ すべてのフォーム属性をJSON形式で取得し、これらを「/トランザクション」のルートに投稿しますか？

ノックアウトドキュメントは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

私は、これは未定義として戻ってくる$ .post

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

を使用して送信するためのJSONに私のフォームを取得するために多くのことを試してみました。 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をフォーマットします。これは、viewModelが関数ではないオブジェクトであるためです。しかし、TranViewModelを関数からオブジェクトに変更した場合、これは多くのバインディングを壊します。私のバインディングを設定する正しい方法は何ですか？それらはオブジェクトまたは関数の中にあるべきですか？

更新＃4

私の例： jsfiddle.net/p6Vcc/3 - ko.toJSONを提出クリックすると、すべてのFormElementsとを収集することはありません、私はすべての私のフィールドに観測可能な追加すべきか？

jsfiddle.net/p6Vcc/4 - 前の例と同じ例ですが、coffeescriptで記録されていますが、送信をクリックすると顧客の姓だけが表示され、他のフィールドは表示されません。

Answer 1

UPDATE 1 だからjsfiddleに上方に設けられたコーヒースクリプトを見て、JavaScriptはCoffeeScriptのによって生成されるとの問題がある：CoffeeScriptのはいつも最後の文を返しますので、あなた

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

JavaScriptの

を結果

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

"これを返す" ために最後に、@を追加する必要があります3210

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