2

多くのknockout.jsバインディングをアタッチし始めたRails3.2アプリがあります。フォームを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を使用すると、アラートボックスに「undefined」が返されます。

モデルのインスタンスを作成する必要がありますか？すべてのフォーム属性を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

$ .postを使用して送信するために、フォームをJSONに変換するためにいくつかのことを試みました

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

これは未定義として返されます。ko.toJSONに何を渡しますか？

アップデート＃3

ノックアウトWebサイトの例を試しました。

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はすべてのformElementを収集しませんが、すべてのフィールドにobservableを追加する必要がありますか？

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

4

1 に答える 1

1

UPDATE 1 jsfiddleで上記のコーヒースクリプトを見ると、コーヒースクリプトによって生成されるjavascriptに問題があります。

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

</ p>

于 2012-04-26T20:37:59.710 に答える