백본 Marionette : 렌더링 컬렉션 내 ItemView

이 오류와 관련된 게시물을 찾을 수 없습니다. Marionette ItemView에서 백본 컬렉션을 렌더링하려고합니다. 템플릿이 렌더링되지만 컬렉션과 관련된 데이터는 템플릿에 렌더링되지 않습니다. 오류 또는 기타 지표가 표시되지 않습니다. 이유를 모르겠다. setTimeout()을 App.mainRegion.show(overView)에 사용했다. 그러나 나는 이것이 수용 가능한 해결책이 아니라는 것을 알고있다. 누군가이 컬렉션에서 ItemView를 올바르게 렌더링하는 방법에 대한 통찰력을 줄 수 있습니까?백본 Marionette : 렌더링 컬렉션 내 ItemView

About.Collection = Backbone.Collection.extend({ 
    url: '/api/about', 
    idAttribute: '_id', 
});

관여보기 정의 :

About.ListView = Marionette.CollectionView.extend({ 
    tagName: 'ul', 
    itemView: App.About.ListItemView, 
}); 

About.OverView = Marionette.ItemView.extend({ 
    tagName: 'div', 
    className: 'inner', 
    template: _.template('<h2>About Overview</h2><p><%= items %></p>'), 
});

내 관련 실행 코드 : 사람들을 위해

var API = { 
    getAbouts: function() { 
     var abouts = new App.About.Collection(); 
     abouts.fetch(); 
    return abouts; 
    }, 
    ... 
} 

var abouts = API.getAbouts(); 

var aboutsListView = new App.About.ListView({collection: abouts }), 
aboutsOverView = new App.About.OverView({collection: abouts}); 

// Correctly renders collection data 
App.listRegion.show(aboutsListView); 

// Does not render collection data 
App.mainRegion.show(aboutsOverView); 

// unless 
setTimeout(function() {App.mainRegion.show(aboutsOverView)}, 50);

을 렌더링 할

내 컬렉션 : 여기 내 간단한 코드입니다 관심이 있으시면,의 집계 데이터를 표시하려는 최종 의도와 함께 ItemView를 사용하고 있습니다.. 필요한 경우 추가 정보를 제공해 드리겠습니다.

출처

2014-04-08 DFenstermacher

collection에있는 fetch 전화의 비동기 특성에 문제가 있습니다. 두 views을 표시하면 collection의 데이터가 반환되지 않았습니다. 당신이 (안된) 다음과 같은 코드 뭔가의 실행 부분을 업데이트하는 경우, 당신은 바로 트랙에 있어야합니다 :

var API = { 
    getAbouts: function() { 
     // Just return the new collection here 
     return new App.About.Collection(); 
    }, 
    ... 
} 

// Fetch the collection here and show views on success 
var abouts = API.getAbouts().fetch({ 
    success: function() { 
     var aboutsListView = new App.About.ListView({collection: abouts }), 
     aboutsOverView = new App.About.OverView({collection: abouts}); 

     // Should render collection data now 
     App.listRegion.show(aboutsListView); 

     // Should render collection data now 
     App.mainRegion.show(aboutsOverView); 
    } 
});

출처

2014-04-09 00:31:28

abouts.fetch 호출은 상당한 시간이 경과 비동기이며, 수집 된 데이터를 수신하기 전에 서버에서. 당신은 자신이 수집 서버에 GET 통화를 할 abouts.fetch를 호출하는 getAbouts 전화

:이 상황이 발생하는 순서입니다.
listRegion.show과 mainRegion.show 호출이 이루어지고 빈 컬렉션이 인 2 개의보기가 렌더링됩니다 (컬렉션이 아직 서버에서 응답을받지 못했습니다).
GET 호출이 결국 반환되고 컬렉션에 데이터가 채워집니다.
aboutsListView 만 데이터를 표시하기 위해 다시 렌더링됩니다 (이유는 아래 참조).

만 aboutsListView가 다시 - 렌더링 이유는 네트 CollectionView 자동 컬렉션의 내용을 교체 할 때 소성 컬렉션의 reset 사건을 인식한다는 것이다. 알아서합니다

// add to About.OverView: 

initialize: function() { 
    this.listenTo(this.collection, 'reset', this.render); 
}

을 : 해당 뷰가 같은 이벤트에 대한 응답으로 다시 렌더링 있도록

당신은, 단순히 OverView에 initialize 기능을 추가하여이 문제를 해결할 수 있습니다.

출처

2014-04-09 00:36:49

백본 Marionette : 렌더링 컬렉션 내 ItemView

답변

관련 문제