2012-04-22 2 views
5

내 응용 프로그램에서 클라이언트 모델이 가져온 모델을 가져 오는 백엔드를 수신하고 모델에 대한 업데이트를 받고있는 socket.io 연결이 있습니다. id로 호출하고 모델 속성에서 set을 호출합니다.backbone.js : 모델 업데이트, 모델 정렬 및 렌더링 다시 수행

컬렉션을 정렬 한 다음 set의 결과로 모델에 새로운 순서를 반영하기 위해 전체적으로 다시 렌더링하고 싶습니다. 대부분의 예제는 개별적인 뷰가 다시 렌더링되는 것처럼 보입니다.). 이것을 달성하는 방법은 무엇입니까?

NB 예를 들어 todo 앱 (이것은 첫 번째 백본 앱)에서 꽤 간결한 backbone.js 레이아웃이 있습니다.

답변

12

컬렉션에 comparator 방법을 제공하면 원하는 것을 얻을 수 있습니다.

예 :

ModelCollection = Backbone.Collection.extend({ 
    comparator: function(a, b) { 
     if (a.get("name") > b.get("name")) return 1; 
     if (a.get("name") < b.get("name")) return -1; 
     if (a.get("name") === b.get("name")) return 0; 
    }, 

    initialize: function() { 
     this.on('change:name', function() { this.sort() }, this); 
    } 
}); 

이 예에서 comparator이 컬렉션의 원인이됩니다은 내부 모델의 name 속성으로 오름차순으로 정렬합니다.

models 중 하나의 속성을 변경할 때 컬렉션이 자동으로 정렬되지 않습니다. 기본적으로 정렬은 새 모델을 만들고 컬렉션에 추가 할 때만 발생합니다. 그러나 comparator은 방법에 의해이 사용됩니다.

위 코드는 임의의 change에서 name 속성에 컬렉션을 다시 정렬하는 이벤트 수신기를 설정하여이 점을 이용합니다. models.

CollectionView = Backbone.View.extend({ 
    initialize: function() { 
     this.collection = new ModelCollection(); 
     this.collection.on('all', function() { this.render() }, this); 
    }, 

    render: function() { 
     this.$el.html(this.collection.toJSON()); 
    } 
}); 

그것을 :)


있어 :

이 그림을 완성하기 위해, 우리는 반드시 그것을 변경에-을 렌더링 다시 확인하기 위해 수집과 관련된 View의 적절한 이벤트 리스너를 설정 Backbone documentation에서

관련 발췌 : 기본적으로

이 더있다 컬렉션에 대해 comparatorcomparator을 정의하면 콜렉션을 정렬 된 순서로 유지 보수하는 데 사용됩니다. 즉, 모델이 추가되면 올바른 인덱스 인 collection.models에 삽입됩니다. 비교기는 sortBy (단일 인수를 사용하는 함수 전달), sort (두 개의 인수가 필요한 비교 함수 전달) 또는 정렬 기준으로 사용할 특성을 나타내는 문자열로 정의 할 수 있습니다. [...] 나중에 모델 속성을 변경하면 comparator이 포함 된 컬렉션이 자동으로 다시 정렬되지 않으므로 주문에 영향을주는 모델 속성을 변경 한 후 sort으로 전화 할 수 있습니다.