다른 구성으로 여러 요소로 백본보기 렌더링

3 개의 jquery-mobile 페이지 위젯이있는 html 페이지가 있습니다. 각 페이지 위젯에는 하위 링크의 구성이 약간 다른 동일한 헤더가 있습니다. BackboneView로 헤더를 만들고 각 페이지 위젯에 렌더링하고 싶습니다. 각 페이지 위젯에는 자체보기가 있습니다. 페이지 템플릿은 다음과 같습니다.다른 구성으로 여러 요소로 백본보기 렌더링

<body> 

    <div id="news" data-role="page"> 
     <header class="header"></header> 
    </div> 

    <div id="updates" data-role="page"> 
     <header class="header"></header> 
    </div> 

    <div id="stuff" data-role="page"> 
     <header class="header"></header> 
    </div> 

</body>

첫 번째 페이지 (이 경우 뉴스보기)의보기가 먼저 렌더링됩니다. 이 페이지는 헤더보기의 인스턴스를 작성합니다. 문제는 헤더로 작업 할 때 발생합니다.

1) 첫 번째 페이지의 머리글을 "#news header"로 지정하고 어떻게하면 업데이트를로드 할 준비가되었을 때 다른 매개 변수 집합을 사용하여 다시 호출 할 수있을만큼 유연하게 유지할 수 있습니까? 페이지?

2) 업데이트 페이지를로드 할 준비가되면 "#updates header"를 타겟팅해야하는 구성이 달라집니다. 따라서 view에 tagName을 하드 코딩하고 싶지 않습니다.

3) 첫 번째 인스턴스화 된 헤더를 나머지보기로 전달하는 방법은 무엇입니까? 아니면이 모든 잘못에 대해 생각하고 기본 헤더 집합을 configs 세트로 구운 내 페이지마다 템플릿으로 확장해야합니까?

각 헤더마다 다른 점은 렌더링 된보기의 요소에 첨부 할 클래스 이름과 해당 페이지에 대해 만드는 몇 개의 앵커 링크입니다. 이를 위해 가벼운 발자국을 유지하기 위해 최대한 재사용을 시도하고 있습니다.

참고 : 중요하지만 requirejs를 사용하고 있는지 확실하지 않습니다. 아마도 requirejs가 모듈을 싱글 톤으로 처리하기 때문에 뷰를 생성하고 필요할 때 항상 재사용 할 수있는 제안 된 방법이 있을까요?

감사합니다.

출처

2015-01-20 Glitches

appView.js와 같은 개요를 사용하십시오. 모든 하위보기를 렌더링하는 것이 담당 할 것입니다.

앱 조회에서

(이 슈퍼 모듈, HeaderView에서 파단을 필요로 할 것) : (NewsView를 말할 수) 당신의 파단에

initialize: function() { 
    this.$news = $('#news'); 
    this.$updates = $('#updates'); 
    this.$stuff = $('#stuff'); 
}, 

render:function() { 
    var newsView = new HeaderView(param1,param2); 
    this.$news.append(newsView.render().el); 
    // do the same for your other subviews 
}

initialize:function(param1,param2) { 
    this.viewclass= param1; 
    //set the other things you need here 
}, 

render: function() { 
    this.$el.html("my content here..model/template/anything")); 
    this.$el.attr('class',this.vewClass); 
}

요점은 기억 새로운 서브 뷰를 생성하고 render()를 호출하는 개요가 있어야합니다. 나는 그것이 도움이되기를 바랍니다.

편집 : 일부 데이터가 특정 하위보기를로드 할 때까지 기다리는 경우 약속을 사용하십시오. 가져 오기 위해 콜렉션이 끝날 때까지 기다리는 중이라면

collection.fetch(function() { 
    success:function(res,model) { 
     new subView(model); 
    } 
}

출처

2015-01-20 10:24:12

감사합니다. @ françois-richard. 이 예제는 많은 안개를 지우지 만 HeaderView 측면에서는 여전히 혼란 스럽습니다. NewsView만으로는 의미가 있지만 UpdatesView도 있다고 말할 수 있습니다. HeaderView는 어디에서 인스턴스화됩니까? 그것은 올바른 데이터를 렌더링하도록 구성 할 수 있도록 페이지 뷰의 각 하나가 될 것이라고 짐작하지만 헤더 뷰를 구성하여 "이벤트"바인딩이 작동하도록 현재 뷰의 "el"이되도록하는 방법 올바른 요소. 각 HeaderView 인스턴스를 여러 번 요소에 바인딩하는 중복 트리거를 두려워합니다. 나는 그것이 의미가 있기를 바랍니다. – Glitches

약간의 불명확 한 예가 나왔습니다. 기본적으로 모든 하위보기 (뉴스, 업데이트, 콘텐츠)는 다른 매개 변수로 동일한보기입니다. 하나의 HeaderView를 만든 다음 앱에서이보기의 여러 인스턴스를 만들지 만 특정 매개 변수 (뉴스, 업데이트 또는 내용에만 해당)를 사용합니다. 도움이 되길 바랍니다. –

다른 구성으로 여러 요소로 백본보기 렌더링

답변

관련 문제