Backbone.js 컬렉션에 오브젝트가 추가되지 않았습니다.

Question

서버에서 컬렉션 데이터를 가져와 Backbone.js를 사용하여 컬렉션 객체에로드하려고합니다. 이 데이터를 처음부터 가져오고이 데이터가있는 HTML 페이지를로드하려고합니다. 그러나 서버에서 다운로드 한 데이터가 컬렉션에 올바르게 채워지지 않습니다. 컬렉션 길이가 0입니다, 내가 뭘 잘못하고 있는지 아는 사람 있습니까?

(function ($) { 
    window.Menu = Backbone.Model.extend({}); 

    window.MenuCollection = Backbone.Collection.extend({ 
     model: window.Menu, 
     initialize: function() { 
      _.bindAll(this, 'parse'); 
     }, 
     url: function(){ 
      return 'http://localhost:8080/testing/123'; 
     }, 
     parse : function(resp) { 
      console.log(resp); 
      // this prints: 
      // "[{"name":"helloworld1"},{"name":"helloworld2"}]" 

      this.add(resp); 
      this.add(new Menu({name:"black perl"})); 
      console.log(this); 
      // the length of the object in the console log is 0 
     } 
    }); 

    window.MenuView = Backbone.View.extend({ 
     tagName: 'li', 
     initialize: function() { 
      _.bindAll(this, 'render'); 
     }, 
     render: function() { 
      $(this.el).html('<span>'+this.model.get('name')+'</span>'); 
      return this; 
     } 
    }); 

    window.MenuListView = Backbone.View.extend({ 
     tagName: 'ul', 
     initialize: function() { 
      _.bindAll(this, 'render'); 
     }, 
     render: function() { 
      this.model.each(function(menu) { 
       $(this.el).append(new MenuView({model:menu}).render().el); 
      }); 

      return this; 
     } 
    }); 

    var view; 
    AppView = Backbone.View.extend({ 
     el: $("body"), 
     initialize: function() { 
      this.menus = new MenuCollection(); 
      this.menuListView = new MenuListView({model:this.menus}); 
      view = this.menuListView; 
      this.menus.fetch({success: function(){console.log("success"); 
      console.log(view.render().el);}}); 
     }, 
     events: { 

     } 
    }); 

    var appview = new AppView; 

})(jQuery); 

Answer 1

당신은 parse 작동 방법을 오해하고 있습니다 : 가져 오기에,

구문 분석collection.parse(response)

구문 분석이 콜렉션의 모델은 서버에서 반환 될 때마다 백본에 의해 호출됩니다. 함수는 원시 response 개체를 전달되며 컬렉션에 추가 할 모델 특성의 배열을 반환해야합니다.

서버에서 [{"name":"helloworld1"},{"name":"helloworld2"}]이 나오면 parse 구현이 필요하지 않습니다.

add으로 보이는 이상한 동작이 더 재미 있습니다. 우리는 fetch 보면, 우리는이를 참조하십시오

fetch: function(options) { 
    //... 
    options.success = function(resp, status, xhr) { 
    collection[options.add ? 'add' : 'reset'](collection.parse(resp, xhr), options); 
    if (success) success(collection, resp); 
    }; 
    //... 
} 

당신은 너무 설정 일들이 같이 일어나는 add 옵션을 사용하지 않고 fetch를 호출하고 있습니다 :

1. collection.parse가 호출됩니다.
2. parse은 몇 가지를 추가하고 console.log으로 전화합니다.
3. 구문 분석에서 아무 것도 반환하지 않습니다.
4. collection.reset이 호출되어 parse이 반환됩니다.
5. reset은 컬렉션을 지우고 parse이 아무 것도 반환하지 않았기 때문에 아무 것도 추가하지 않습니다. console.log(this)는reset 호출 후 this을 보여주는 끝 :

일부 console.log 구현은 콘솔의 빈 집합을 얻을 그 이유는, 콘솔에서 라이브 참조를 넣어.

Answer 2

실제로 또 다른 문제는 "this"를 뷰 렌더링 내부의 for 루프 컨텍스트에 전달하지 않는다는 것입니다. 따라서 "el"요소를 반환하면 서버의 내용없이 html 페이지가 비어있게됩니다.

Answer 3

backbone.js 0.9+ 버전 0.5.3의 구문 분석 방법은 구문 분석을 호출하지 않는다는 것을 명심하십시오.