백본 채우기 컬렉션의 모델

Question

여기 내 시나리오는 다음과 같습니다.

모델로 구성된 백본 컬렉션이 있습니다. 그러나 성능상의 이유로 이들은 "완전한"모델이 아닙니다. 내 "전체"모델은 매우 큽니다 (각 "전체"모델에 동일한 크기의 객체가있는 하위 컬렉션이 있다고 가정). 서버에서 컬렉션을 가져올 때 속성이 하위 집합 인 "부분적"모델 배열을 반환합니다. "전체"모델 (예를 들어 전체 하위 모음 대신 하위 모음의 길이 만 반환)은 목록보기에서 모델을 사용자에게 표시하기에 충분합니다.

사용자가 목록에서 항목을 선택하면 서버에서 "전체"모델을 가져 와서 해당 모델의 상세보기를 표시합니다. 지금 가지고있는 문제는 동일한 모델의 두 가지 버전이 있는데 하나는 컬렉션에 "부분적"이고 하나는 "전체"로, 수동으로 동기화해야하는 것은 올바른 방법이 아니라는 것입니다.

나는 "전체"모델에 "부분"모델을 "채우고"같은 참조를 모두 유지하면서 기존 패턴을 (백본 또는 마리오네트에서), "depopulating" 우리가 더 이상 모든 추가 데이터를 필요로하지 않을 때 (즉, 사용자가 목록의 다른 항목으로 이동하는 경우) 동일한 모델을 "전체"모델에서 "부분"모델로 변환 할 수 있습니다.

내 응용 프로그램의 프런트 엔드와 백 엔드 모두를 완벽하게 제어 할 수 있으며 패턴에 따라 서버가 반환하는 내용을 변경해야하는 경우 적절하게 변경할 수 있습니다.

Answer 1

하나의 도메인 객체를 표현하고 있으므로 (두 가지 다른 형태 임) 하나의 Model 인스턴스를 사용하여 두 경우를 모두 다루어야합니다.

한 매우 깨끗한 패턴 : 그것은 의미보다 정확한 때문에

var MyModel = Backbone.Model.extend({ 
    // ... existing code... 

    inflate: function() { 
    return $.ajax({ 
     // parameters to fetch the full version 
    }).then(function(data) { 
     // process the response - something like this: 
     this.set({ 
     a: data.a, 
     b: data.b 
     }, { silent: true }) 

     this.trigger('inflate') 
    }) 
    }, 

    deflate: function() { 
    this.unset('a', { silent: true }); 
    this.unset('b', { silent: true }); 

    // any other cleanup to prevent leaking the large attributes 

    this.trigger('deflate') 
    } 
}) 

이 패턴은, change 발사에 사용자에게 우선하여 inflate 및 deflate 이벤트를 사용합니다.

물론 압축 해제해야하는 속성 이름 배열을 유지함으로써 코드를 DRY 할 수 있습니다. 페치는 같은 모델, 전화 당신의 품목 뷰 사용을 클릭하면

var Library = Backbone.Collection.extend({ 
    model: Book, 
    url: "/books" 
}); 

var Book = Backbone.Model.extend({ 
    url: function() { 
     return "/books/" + this.get("id"); 
    } 
}); 

: 컬렉션은 "부분"모델에 URL을 가지고 것처럼

는

Answer 2

, 당신의 모델은 전체 버전에 대한 URL이 있어야합니다()를 선택하고 자세히보기로 전달합니다.

var BookView = Backbone.View.extend({ 

    tagName: "li", 

    events: { 
     "click .details": "openBook" 
    }, 

    initialize: function() { 
     // ... 
    }, 

    openBook: function() { 
     this.model.fetch(); 
     var bookDetailView = new BookDetailView({ model: this.model }); 
     // Or create the view after successful fetch... 
    } 

    // ... 

}); 

var BookDetailView = Backbone.View.extend({}); 

동일한 모델의 두 가지 버전이 제공되지 않습니다. 컬렉션 뷰의 모델에는 이제 모든 특성이 있지만 템플릿에있는 것만 표시합니다.

"과소 평가 (depopulating)"까지는 필요하지 않은 것처럼 보입니다. 항목을 다시 클릭하면 "전체"모델 데이터를 사용할 수 있는지 확인하고 추가 가져 오기를 잃을 수도 있습니다. 데이터를 정말로 삭제하고 싶은 경우, 모델의 메소드를 작성해 속성을 설정 해제 해주세요.