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?

Документация Нокаут описывает функцию pushJSON но страница больше не существует: http://knockoutjs.com/documentation/submit-binding.html

Update # 1

Я попытался вручную отправки JSON, и это позволило мне создать объект

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

Update # 2

Я попробовал несколько вещей, чтобы получить свою форму в формате JSON для представления с помощью $ .post

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

Это возвращается как неопределенные. Что я передаю в ko.toJSON?

Update # 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 от функции к объекту, это сломает много моих привязок. Каков правильный способ настройки привязок? Должны ли они находиться в объекте или функции?

Update # 4

Мои примеры: jsfiddle.net/p6Vcc/3 - При нажатии представляет в ko.toJSON не собирает все formElements, я должен быть наблюдаемым при добавлении всех моих полей?

jsfiddle.net/p6Vcc/4 - тот же пример, что и предыдущий, кроме перекодированного в coffeescript, теперь, когда при нажатии на него отображается только фамилия клиентов и ни одно другое поле.

Answer 1

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