2012-07-19 3 views
0

Backbone.LayoutManager를 사용하여 프로토 타입 Backbone 응용 프로그램을 작성 중이며 잘 모르겠습니다.Backbone.LayoutManager 위임 된 뷰 이벤트

"사람"{firstname, lastname}을 목록보기에 추가 할 수있는 양식이 있는데 모델을 저장하면 새 항목이 목록에 나타납니다. 또한 페이지를 새로 고친 후 작동하는 제거 기능이 있지만 페이지 새로 고침없이 방금 만든 사람을 삭제하려고하면 removeUser() 함수가 호출되지 않습니다.

내 코드는 다음과 같습니다. 누군가 나를 도울 수 있습니까? 나는 단지 백본을 배우려고 노력 중이고,이 질문에 대한 답은 물론 다른 비판들에 대해서도 감사 할 만하다. 감사.

define([ 
    // Global application context. 
    "app", 

    // Third-party libraries. 
    "backbone" 
], 

function (app, Backbone) { 
    var User = app.module(); 

    User.Model = Backbone.Model.extend({ 
     defaults : { 
      firstName: "", 
      lastName: "" 
     } 
    }); 

    User.Collection = Backbone.Collection.extend({ 
     model: User.Model, 
     cache: true, 
     url: "/rest/user" 
    }); 

    User.Views.EmptyList = Backbone.View.extend({ 
     template: "users/empty-list", 
     className: "table-data-no-content", 
     render: function (manage) { 
      return manage(this).render().then(function() { 
       this 
        .$el 
        .insertAfter(".table-data-header") 
        .hide() 
        .slideDown(); 
      }); 
     } 
    }); 

    User.Views.Item = Backbone.View.extend({ 
     template: "users/user", 
     tagName: "ul", 
     className: "table-data-row" 
     events: { 
      "click .remove": "removeUser" 
     }, 
     removeUser: function() { 
      console.log(this.model); 
      this.model.destroy(); 
      this.collection.remove(this.model); 
      this.$el.slideUp(); 
      if (this.collection.length === 0) { 
       this.insertView(new User.Views.EmptyList).render(); 
      } 
     } 
    }); 

    User.Views.List = Backbone.View.extend({ 
     initialize: function() { 
      this.collection.on("change", this.render, this); 
     }, 
     render: function (manage) { 
      if (this.collection.length > 0) { 
       jQuery(".table-data-no-content").slideUp("fast", function() { 
        $(this).remove(); 
       }); 
       this.collection.each(function(model) { 
        this.insertView(new User.Views.Item({ 
         model: model, 
         collection: this.collection, 
         serialize: model.toJSON() 
        })); 
       }, this); 
      } else { 
       this.insertView(new User.Views.EmptyList()); 
      } 

      // You still must return this view to render, works identical to 
      // existing functionality. 
      return manage(this).render(); 
      } 
    }); 

    User.Views.AddUser = Backbone.View.extend({ 
     template: "users/add-user", 
     events: { 
      "click input#saveUser": "saveUser" 
     }, 
     render: function (manage) { 
      return manage(this).render().then(function() { 
       $("input[type='text']") 
        .clearField() 
        .eq(0) 
        .focus(); 
      }); 
     }, 
     saveUser: function() { 
      var user = new User.Model({ 
       firstName: $(".first-name").val(), 
       lastName: $(".last-name").val() 
      }); 

      this.collection.create(user); 

      this 
       .$("input[type='text']") 
       .val("") 
       .clearField("refresh") 
       .removeAttr("style") 
       .eq(0) 
       .focus(); 
     } 
    }); 

    return User; 

}); 
+0

마지막으로 모델이 POST 응답에서 id 속성을 올바르게 업데이트하지 못하기 때문에 이러한 상황이 발생했다는 것을 알게되었습니다. 고칠 방법을 모르겠다. –

+0

서버에서 올바른 데이터를받지 못했다는 사실이 드러납니다. POST에 대한 내 서버 응답은'{id : "aaaa-bbb-ccc-ddd"}'와 같은 JSON 객체 대신 문자열로 반환 된 ID입니다. 그것이 고쳐 지자 모든 것이 올바르게 작동했습니다. –

답변

0

문제는 서버에서 잘못된 것으로 판명되었습니다. 서버가 올바른 JSON 객체를 보내면 모든 것이 올바르게 수행됩니다.