2012-01-04 3 views
1

knockoutjs를 사용하여 rails3 crud views를 작성하려고합니다. 어떻게 든 자습서와는 완전히 다른 동작을 얻고 있으며, 당신이 나에게 몇 가지 힌트를 줄 수 있다면 감사 할 것입니다 ...knockoutjs : 비어있는 객체가 전송되는 이유는 무엇입니까?

내 코드는 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 

또한 삭제 된 개체 만 배열에서 제거하고 레일이 어떻게 알아 내야하는지, 오브젝트 스토어에서 스트립을 떼어 내야하는지 궁금하다. 모든 것이 단지 포스트 일 뿐이다 ... 이것은 나에게 모든 잘못을 보인다. 내 실수는 무엇입니까?

두 가지 보너스 질문 : 내 글로벌 js 네임 스페이스를 이러한 생성자 함수로 스팸하는 것을 싫어하지만 익명 함수 내에서 숨기려고하면 더 이상 찾지 못하는 것 같습니다. 이 문제를 해결할 수 있습니까?

json 요청에서 html 동작으로 리다이렉트하는 것을 멈추고 (어쨌든 어떻게 어리석은 지) 나에게 ok 메시지 나 오류를 보내려면 어떻게해야합니까?

답변

0

전역 변수의 경우 네임 스페이스를 만들고 /하거나이 페이지의 코드를 viewmodel을 나타내는 함수/개체로 래핑하여이를 해결할 수 있습니다. 예 :

var my = my || {}; // 네임 스페이스. 전체 앱에 대해 한 곳에서이를 정의 할 가능성이 높습니다.

그런 다음 평소처럼 뷰 모델을 정의하거나 자체 호출 함수 (아래 그림 참조) 안에 래핑 할 수도 있습니다. viewmodel 접근 방식을 적극 권장하므로 페이지에 대한 모든 동작이 하나의 객체에 매달려 있습니다.

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