백본 페이징 기 멀티보기에서

Question

나는이 예에서 Backbone.Paginator.Fluenced와 forked로 만든 쇼핑 카트 응용 프로그램을 가지고 있습니다. https://github.com/msurguy/laravel-backbone-pagination

약간의 변경이있었습니다. 항목 링크를 클릭하면 부트 스트랩 모달 창이 열립니다. 코드는 다음과 같습니다.

그리고 이것은 모달 창에서 제품 세부 정보를 보여주는 내 ModalView입니다.

app.views.ModalView = Backbone.View.extend({ 
    template: _.template($('#modal-bsbb').html()), 
    initialize: function() { 
    _.bind(this.render, this);  
    }, 
    render: function() { 
    $('#myModalPop').modal({backdrop: 'static',keyboard: true}); 
    $('#myModalPop').html(this.template({ 
     'model':this.model.toJSON() 
    })); 
    return this; 
    } 
}); 

위의 코드는 모두 문제가 없습니다.

이 코드를 최적화하기로 결정하고 이에 대한 개선이 필요했습니다. 먼저 모든 제품 데이터를 가져 와서이 데이터를 모달 창으로 보냅니다. 메인 메타 데이터 만 보내야하며이 창에서 세부 정보를 가져와야한다고 생각합니다.

그래서 새로운 백본 모델 및 컬렉션을 만들었습니다.

app.models.ItemDetails = Backbone.Model.extend({}); 

app.collections.ItemDetails = Backbone.Collection.extend({ 
    model: app.models.ItemDetails, 
    dataType: 'json', 
    url : "/api/item-details", 
    parse: function(response){ 
    return response.data; 
    } 
}); 

내 API는 JSON 반환

{"data":{"id":8,"title":"Product 8","seo":"product-8","code":"p8","review":"Lorem30"}} 

내 문제가 ModalView에 여러 모델을 추가하고, 블로그에서 많은 예제와 질문을 시도했습니다 & 포럼은 해결 방법을 찾지 못했습니다.

ModalView를 변경하기 위해 많은 것을 시도했습니다. ($ .extend, 모델과 모델을 설정하는 데 ..) ModalView를 변경하려면 아래 코드를 사용하십시오.

app.views.ModalView = Backbone.View.extend({ 
    template: _.template($('#modal-bsbb').html()), 
    initialize: function() { 
    _.bind(this.render, this);  
    }, 
    render: function() { 
    var itemDetails = new app.collections.ItemDetails(); // this is new line 
    var model2 = itemDetails.fetch(); // this is new line 
    $('#myModalPop').modal({backdrop: 'static',keyboard: true}); 
    $('#myModalPop').html(this.template({ 
     'model1':this.model.toJSON(), 
     'model2':model2.model // this is new line 
    })); 
    return this; 
    } 
}); 

밑줄 템플릿에 두 번째 모델을 추가하고 싶습니다. 그러나 위선적 인 말투!

먼저 크롬 개발자 콘솔에서 코드를 실행할 때 Object를 가져옵니다. 하지만 새 모델 또는 JSON으로 변환 할 수 없습니다.

var itemDetails = new app.collections.ItemDetails(); 
    var model2 = itemDetails.fetch(); 
    console.log(model2); // gets fetch data as an object 

나는 정확히 어디에 문제가 있는지 혼란 스럽다.

미안 해요 내가 백본 전문가가 아니며 아마도 포럼에서 그것에 대해 많이 조사했지만 아마 뭔가 잘못하고 있습니다. 나는 그것에 대해 반복해서 읽었지만 문제를 해결할 수 없었다. 저 좀 도와 주 시겠어요. 미리 감사드립니다.

해결할 :

검색 수 후 및 응답 아래의 도움으로. 나는 내 문제를 해결했다.

app.views.ModalView = Backbone.View.extend({ 
    template: _.template($('#modal-bsbb').html()), 
    initialize: function() { 
    _.bind(this.render, this);  
    }, 
    render: function() { 
    var _thisView = this; 
    var itemsDetails = new app.collections.ItemsDetails(); 
    itemsDetails.fetch({ 
     success:function(data){ 
     $('#myModalPop').modal({backdrop: 'static',keyboard: true}) 
     .html(_thisView.template({ 
      'model1':_thisView.model.toJSON(), 
      'model2':data.at(0).toJSON() 
     })); 
     }}); 
    } 
}); 

Answer 1

백본을 사용하는 서버에 대한 모든 요청은 비동기식입니다. 즉, 요청 직후에 반환 된 데이터가 없거나 서버가 여전히 데이터를 처리하고 있음을 의미합니다.

이 문제를 해결하려면 두 가지 방법이 있습니다.

첫 번째 방법 : 콜백

모델/컬렉션 내부

GetSomeData:-> 
    @fetch(
     success:=(data)> 
      console.log data // the returned data from server will be avaiable. 

    ) 

두 번째 방법 일 : 트리거를 듣습니다. 콜백을 작성하지 않기 때문에 백본을 사용하면 더욱 멋지게 보입니다.

내부 모델 GetSomeData : -> @fecth()

내부 모습

initialize:-> 
    @model = new KindOfModel() 
    @model.on "sync", @render, @ 

백본가 자동으로 당신을 위해 몇 가지 이벤트를 트리거 A는 여기 읽어 소요됩니다. http://backbonejs.org/#Events

이미하고있는 것처럼, 당신은 (컬렉션도

var에 itemDetails = 새로운 app.collections.ItemDetails에 대한 몇 가지 트리거를 듣고해야합니다) // this is new line var model2 = itemDetails.fetch(); // 여기에 문제가 있습니다