백본 앱은 어떻게 관리합니까?

Question

저는 백본 주위에 머리를 감싸려고합니다. 구체적으로 어떻게 응용 프로그램이 그 수명 동안 어떻게 흐르고 있습니까? 불행히도 제 일에는 API가 어떻게 구성되어 있는지에 대한 액세스 권한이 없습니다. 미묘한 일관성없는 구조로 여러 기간에 걸친 많은 전화가 있습니다.

반입 fetch 또는 sync는 반환 값을 표준화하는 데는 문제가되지 않지만 실제로 (백본 응용 프로그램에서 다이빙을 시작할 때) 실제 코드를 레이아웃하는 방법입니다.

여기가 내 실제 예입니다. 이 페이지는 중요하지 않으며 백본으로 다시 쓰려고합니다. 여기 흐름입니다 :

1. 페이지 장르 유형의 기반으로 장르 형로드 하위 장르를 클릭하면 전화
2. 에서 장르 유형의 목록을로드 (하위 장르 유형은 매개 변수로 장르 코드가 필요하기)
3. 하위 장르 유형을 클릭하면 해당 기준을 가진 모든 제품이로드됩니다.

나는 꽤 멀지 만 어느 시점에서는 코드가 엉망이되어 가고 있다고 느낍니다. 자연스럽지 않습니다. 마찬가지로 나는 물건을 밀어 넣고있다.

그래서 내 공식 질문은 : 백본 애플 리케이션을 어떻게 관리합니까? 모든 예제가 보여로 한

var App = App || {}; 

좋아, 주요 응용 프로그램보기로 시작할 수 있어야로

내가 글로벌 네임 스페이스를 만든 : 여기

내 생각의 과정을 요약 한 것입니다

App.MainView = Backbone.View.extend({ 
    //this loads the outer stuff 
    //and creates an instance of the Genre View 
}); 

아주 간단하고 장르 모델, 컬렉션 및보기가 필요합니다 (하위 장르에도 적용됩니다)

App.Genre = Backbone.Model.extend(); 

App.Genres = Backbone.Collection.extend({ 
    url: 'returns a list of genres', 
    model: App.Genre, 
    initialize: function() { 
    this.fetch(); 
    }, 
    fetch: function() { 
    var self = this; 

    $.ajax({ 
     url: this.url, 
     success: function(response) { 
     **format return** 
     self.add(formattedArrayOfModels); 
     } 
    }); 
    } 
}); 

지금에보기, 혼란스러운 부분 여기까지

App.GenreView = Backbone.View.extend({ 
    el: 'element',//easy enough 
    tmpl: 'my handlebars template',//implementing handlebars...no problem 
    initialize: function() { 
    //this produces a collection full of genres 
    this.genreList = new App.Genres(); 
    this.genreList.on('add', _.bind(this.render, this)); 
    }, 
    render: function() { 
    //rendering not a problem, pretty straight forward 
    } 
}); 

에 나는 아무런 문제가 없습니다. 장르 목록이로드되며 잘 진행됩니다. 이제 사용자가 장르를 클릭하면 하위 장르를로드하려고합니다.

events: { 
    'click a': 'getSubGenres' 
}, 
getSubGenres: function(e) { 

} 

여기가 내 문제입니다. getSubGenres에 보관 하시겠습니까?

var subGenre = new App.SubGenreView(); 

아니면 장르보기에 포함시켜야합니까?

this.subGenre = new App.SubGenreView(); 

어떻게 든 부모 개체에 넣어야 다른보기에서 액세스 할 수 있습니까? 어떻게 그런 것들을 통제합니까?

그리고 이미 하위 장르 컬렉션이있는 경우 어떻게로드 된 컬렉션을 사용합니까 (다른 아약스 호출 대신).

사용하려는 접근 방식입니까?

Answer 1

나는 대답 것들의 몇 전에 먼저 다음 그것의 일이다 년부터 $ 아약스 호출을 필요로하지 않는 기능을 가져 오기 때문에, 당신은 error:function(){}을 평가할 수 success:function(){} 즉시 내부 패치,하지만 그 URL이 설정되어 있는지 가정 것 바르게. 두 번째 : 내 백본 키보드 - 헤드 - 싸움에 많은 도움이 한 가지는 osmani Backbone Fundamentals입니다. 여기에는 pdf 형식의 매우 풍부한 자습서가 포함되어 있습니다.

이제 내 질문에 답하기를. 내 경험에 의하면, '이'가 필요합니다. 익숙해지기에 좋은 습성이 있고, 올바르게 구현하면 이러한 문제를 해결할 수있는 뭔가가 있습니다. backbone layoutmanager

어쨌든, 하위 뷰를 배치 할 위치를 결정하는 것은 전적으로 귀하의 경우에 설계 결정이며 페이지 및 파일을 구조화하는 방법에 많이 달려 있습니다.

미리로드 된 "컬렉션"사용 방법에 대해 : 나는 실제로 얻지 못했습니다. 컬렉션에있는 모든 하위 항목이 포함되어 있으므로 일반적으로보기가 바뀌어도 변경되지 않아야합니다. 특정 장르보기, 당신은 여전히 ​​그것을 사용할 수 있습니다.

여전히 내가 말한 모든 것은 파일을 구조화하는 방법과 관련이 있으며 app.js와 router.js 및 기타 파일을 많이 처리하지만 주 작업은 항상 메인 2에 있으므로 기본적으로 항상 모든 것에 접근하십시오.

질문에 대한 답변입니다.