Backbone.js : 실제 앱에서 컬렉션 렌더링

Question

backbone.js 앱의 대부분 '자습서'예제는 깔끔한 모델이라고 가정합니다. 나 .e. 사용자가 항목을 추가 할 때까지 모형 콜렉션이 처음에는 비어 있음을 나타냅니다. 물론 백엔드 저장소에서 시작하는 기존 컬렉션이있는 실제 앱에서는 그렇지 않습니다.

사람들이 백본의 기존 컬렉션을 어떻게 다루는 지 알고 싶습니다. 구체적으로 :

• fetch에 저장된 컬렉션은 어떻게 렌더링합니까? 컬렉션을 반복하는 경우입니까? 이것이 어떤 사건에 의해 촉발되어야 하는가?

• 백본 문서는 초기로드시 사용할 수있는 데이터를 사용한다는 것을 의미하는 '부트 스트래핑'에 대해 이야기합니다 (이것은 또한 SEO 관점에서 이해할 수 있습니다). 그러나 이것이 실제로 어떻게 작동합니까? 데이터는 서버 측 JS로 덤프됩니까? 또는 JS가 DOM을 검사합니까?

나는 이것이 가난한 느낌 인 것처럼 느껴진다. 그러나 대답에 따라 그것을 확장 할 것을 기대한다.

편집

는 그래서 합의가 JS 파티 및 프로세스 페이지로드로 데이터를 추가 할 것 같다.

이 기술로 볼 수있는 하나의 큰 단점은 정보가 검색 엔진 스파이더에게는 제공되지 않는다는 것입니다. 그 관점에서 볼 때 DOM에서 추출하는 것이 더 낫습니다 (아무도 그렇게하지 않는 것을 보았지만). 또는 HTML 서버 측에 과을 추가하면 JS에 데이터가 저장됩니까?

Answer 1

나는 당신과 같은 상황을 겪었지만 처음에는 데이터가 항상 부트 스트랩되는 것을 원하지 않습니다 (특히 제 3 자 API 호출의 경우). 필자는이 작업을 수행하는 튜토리얼을 보지 못했지만 실제로 문서를 살펴 보았습니다. 콜렉션에서 'reset'이벤트 (전체 콜렉션이 다시 채워지면 시작됩니다)를 바인딩하기 만하면됩니다. 빠른 예를 들자면 :

my_application.JS

window.MyApplication = { 
    Models: {}, 
    Collections: {}, 
    Views: {}, 
    Routers: {}, 
    init: function() { 
    // Start the data loading 
    this.someItems = new MyApplication.Collections.Items(); 
    this.someItems.fetch(); 

    // Start rendering the UI before the data is ready 
    new MyApplication.Routers.Items(this.someItems); 
    Backbone.history.start(); 
    } 
}; 

라우터//

MyApplication.Routers.Items = Backbone.Router.extend({ 
    routes: { 
    "" : "index" 
    }, 

    initialize: function(collection) { 
    this.collection = collection; 
    }, 

    index: function() { 
    var view = new MyApplication.Views.ItemsIndex({ collection: this.collection }); 
    $('.items').html(view.render().el); 
    } 
}); 

보기/항목을 items_router.js

MyApplication.Views.ItemsIndex = Backbone.View.extend({ 
    initialize: function() { 
    _.bindAll(this, "render"); 

    // Once the collection is fetched re-render the view 
    this.collection.bind("reset", this.render); 
    }, 

    render: function() { 
    console.log(this.collection.length); 
    // Render content 
    return this; 
    } 
}); 

Answer 2

컬렉션을 렌더링하는 한 일반적으로 컬렉션을 반복하고 각 모델에 대해 하위 뷰를 만듭니다. 여기에 도움이 될만한 링크가 있습니다 http://liquidmedia.ca/blog/2011/02/backbone-js-part-3/

언제 렌더링해야합니까? 글쎄 그건 대답하기 힘든 것이지만 특정 이벤트에 대한 반응이라고 말하지는 않을 것입니다. 내가 좋아하는 한 가지 점은 다른 하위보기를 렌더링하는 하위보기를 렌더링하는 주보기가 하나 있다는 것입니다. 규칙에 따라 DOM에 직접 렌더링하지는 않지만 모든 하위보기가 렌더링되면 기본보기가 DOM에 추가되고 전체 페이지가 즉시 표시됩니다. 이것은 '스타일이없는 컨텐츠의 플래시'를 피합니다.

부트 스트래핑에 관해서는 FAQ에서 읽은 내용을 볼 수 있습니다. 내가 ASP.Net MVC 3 그래서 내 서버 측 렌더링 뷰가 같은 것을 할 것이다 사용 (I 일반적으로 전역 네임 스페이스에 '책'생각하지 않을지라도) : 도움이

<script type="text/javascript"> 
    books = new BooksCollection(); 
    books.reset(@Html.ToJson(Model)); 
</script> 

희망을.

Answer 3

는 사실, 난 잠시 동안 백본에 몇 가지 작업을 수행 한 items_index.js , 그리고 Bootstrapping 데이터가 페이지로드에 따라 곧 데이터를 요구한다는 것을 알았을 때 어떤 경우에는 정말 유용합니다. 추가 AJAX 호출) 심포니에서

을 감소 후스, 나는 이런 식으로 필요한 데이터를 렌더링하여 수행) (초기화에서,

<script type="text/template" id="__user-boostrap"> 
    {% echo your data from php or render a controller in symfony or whatever server side script/framework you want %} 
    // for example in symfony2, I do: 
    {% render "myBundle:Core:getUser" %} 
</script> 

이제 기능을 사용하면 DOM에서 직접이 데이터를 올릴 수 그리고 평소와 같이 작업하고 시작 : 예를 들어

, 내 라우터를, 난이 도움이

myApp.Router = Backbone.Router.extend({ 
    var data = JSON.parse($('__user-bootstrap').html()); 
    var __games = new myApp.Games(); 
    __games.reset(__games.parse(data.games)); 
    var gameList = new myApp.GameListView({ collection: __games }); 
    $(this.gameView).html(gameList.$el); 
}); 

희망을 ... 할