knockoutjs：空のオブジェクトが送信されるのはなぜですか？

Question

私はknockoutjsを使ってrails3 crud viewsを書こうとしています。どういうわけか私はチュートリアルとはかなり異なる動作をしていて、あなたに私にいくつかのヒントを与えることができれば感謝しています...

私のコードはloading and saving data tutorialの複製ではありません。私はサーバーからデータをロードし、何もしないで保存し、コントローラが取得し、何らかの形で永続化される「空の」オブジェクトを取得します。しかし、既存のデータへの変更は決して行われず、削除もされません。

私はコードが表示されることがあります

%ul#folders{'data-bind' => 'foreach: folders, visible: folders().length > 0'} 
    %li 
    %span{'data-bind' => 'text: id'} 
    %span{'data-bind' => 'text: name'} 
    %span{'data-bind' => 'text: description, visible: description'} 
    %a{'data-bind' => 'click: $parent.removeFolder'}Excluir 

%button{'data-bind' => 'click: save'}Salvar 

%form{'data-bind' => 'submit: addFolder'} 
    Add folder: 
    %input{'data-bind' => 'value: newFolderName', 'placeholder'=>"Nome"} 
    %button{type: "submit"}Adicionar 

=content_for :script do 
    :javascript 

    function Folder(data) { 
     data = data || {id: 0, name: "", description: ""}; 
     this.id = data.id; 
     this.name = ko.observable(data.name); 
     this.description = ko.observable(data.description); 
    } 

    function FolderListViewModel() { 
     var self = this; 
     self.folders = ko.observableArray([]); 
     self.newFolderName = ko.observable(); 

     $.getJSON("/folders", function(allData) { 
     var mappedFolders = $.map(allData, function(item) { 
      return new Folder(item); 
     }); 
     self.folders(mappedFolders); 
     }); 

     self.addFolder = function() { 
     self.folders.push(new Folder({name: self.newFolderName()})); 
     self.newFolderName(""); 
     }; 

     self.removeFolder = function(folder) { 
     self.folders.remove(folder); 
     }; 

     self.save = function() { 
     console.log(self.folders()); 
     $.ajax("/folders", { 
      data: ko.toJSON({folders: self.folders}), 
      type: "post", 
      contentType: "application/json", 
      success: function(result) { 
      return console.log(result); 
      } 
     }); 
     }; 
    } 

    $(function(){ 
     ko.applyBindings(new FolderListViewModel()); 
    }); 

保存（変更かどうかがある場合、独立した）は、常に同様の要求をもたらす：

Started POST "/folders" for 127.0.0.1 at 2012-01-04 22:57:40 +0100 
    Processing by FoldersController#create as */* 
    Parameters: {"folders"=>[{"id"=>2, "name"=>"dim sum", "description"=>"ist warm!"}, {"id"=>3, "name"=>"Sushi", "description"=>"roh und kalt"}, {"id"=>1, "name"=>"Spagetti", "description"=>"Carbonara"}, {"id"=>10, "name"=>"Wiener", "description"=>"vom Kalb"}, {"id"=>11, "name"=>"Feijão", "description"=>""}], 
"folder"=>{}} <== LOOK HERE 
    Folder Load (0.3ms) SELECT "folders".* FROM "folders" ORDER BY "folders"."row_order" 
    (0.1ms) BEGIN 
    Folder Load (0.2ms) SELECT id, row_order FROM "folders" ORDER BY "folders"."row_order" DESC LIMIT 1 
    Folder Load (0.2ms) SELECT id, row_order FROM "folders" WHERE "folders"."row_order" = 8388592 LIMIT 1 
    SQL (0.4ms) INSERT INTO "folders" ("created_at", "description", "name", "row_order", "updated_at") VALUES ($1, $2, $3, $4, $5) RETURNING "id" [["created_at", Wed, 04 Jan 2012 21:57:40 UTC +00:00], ["description", nil], ["name", nil], ["row_order", 8388592], ["updated_at", Wed, 04 Jan 2012 21:57:40 UTC +00:00]] 
    (0.5ms) COMMIT 
Redirected to http://0.0.0.0:3000/folders/21 
Completed 302 Found in 54ms 

をまた削除されたオブジェクトのみが配列から削除され、レールがどのように理解されるべきか、オブジェクトストアからそれらを取り除かなければならないことがわかります...すべては単なる投稿です...これは私にとって間違っています。 私の間違いは何ですか？

2つの追加質問： 私はこれらのコンストラクタ関数でグローバルなjs名前空間をスパムして嫌いですが、私はそれらを無名関数の中に隠そうとすると、もはやそれらを見つけられないようです。これは救済できますか？

jsonのリクエスト（どのように愚かなのですか）にhtmlアクションをリダイレクトするのをやめて、大丈夫なメッセージやエラーを送信するにはどうすればよいですか？

Answer 1

グローバル変数の場合は、それらの名前空間を作成したり、このページのコードをビューモデルを表す関数/オブジェクトにラップすることで、それを修正できます。例：

var my = my || {}; //あなたの名前空間。アプリ全体の1か所でこれを定義している可能性があります。

次に、通常と同じようにビューモデルを定義したり、自己呼び出し関数内にラップすることもできます（下図参照）。私は非常にviewmodelのアプローチをお勧めします、あなたのページのすべての動作が1つのオブジェクトにぶら下がっている。

(function (my, ko) { 
    "use strict"; 
    my.viewmodel = { 
     firstName: ko.observable(), 
     lastName: ko.observable() 
    }; 
}(my, ko));