backbone.js 웹 응용 프로그램 프로젝트 디자인

Question

Backbone.js + Require.Js + Python으로 대규모 응용 프로그램을 설계하고 있습니다. 왼쪽 레이아웃에 메뉴 항목 표시에 대한 질문이 있습니다. 그래서 메뉴의 모든 선택을 위해 중간 레이아웃에 내용을 표시해야합니다. 보기가 가운데 레이아웃에 표시하기위한 관련 콘텐츠 만 보유하고 있음을 확신합니다. 가운데 레이아웃을 어떻게 동적으로 렌더링합니까? Ajax를 사용해야합니까? OR backbone.js 템플릿 메커니즘은이 동적을 지원합니다. 예를 들어 제품 목록과 사용자 목록이 있습니다. 왼쪽 메뉴 항목은 "제품"과 "사용자"입니다. '제품'을 클릭하면 제품 레이아웃이 가운데에 표시됩니다. 중간 레이아웃을 변경하지 않아도 메뉴를 사용할 수 있도록 메뉴를 구성해야합니다.

라자 K

Answer 1

1. 동적 레이아웃 (중간 레이아웃)를 잡아 DIV 추천 메뉴 및 HTML 용기 요소의 태그를 포함하는 루트 컨테이너/서식.
2. 루트 컨테이너를 나타내는 백본보기를 만듭니다.
3. 중간 레이아웃에 동적으로 표시되는 각 메뉴 항목 (사용자, 제품)에 대해 하위 백본보기를 만듭니다.
4. 이러한 각 메뉴 항목에 대한 루트 백본보기에서 이벤트 해시 및 해당 처리기 또는 콜백을 정의하십시오.
5. 메뉴 항목에 대한 콜백 바인딩은 컨트롤러 (사용자 정의 js 객체)에 위임하여 중간 레이아웃에 필요한 데이터를로드합니다.
6. 그런 다음 데이터는 해당 하위 백본보기로 전달되고 하위 레이아웃이 렌더링됩니다.
7. 마지막으로 {trigger : false}를 사용하여 라우터 navigate 메소드를 호출하여 그에 따라 URL을 업데이트하십시오.

var RootView = Backbone.view.extend({ 
 
    // Id of root container that contains menu and container for middle layout 
 
    el : "#root_container", 
 
    events : { 
 
    "click #user_link" : "initUserLayout", 
 
    "click #prod_link" : "initProdLayout" 
 
    }, 
 
    
 
    function : initUserLayout() { 
 
    // A Custom Controller object that loads data. 
 
    // Used to Seperate the data load logic from the view. 
 
    
 
    var data = myAppController.fetchUserData(); 
 
    // Creating the instance of the child view. 
 
    
 
    var userView = new UserView({users: data}); 
 
    userView.render(); 
 
    
 
    // Calling router instance's navigate method to update the url accordingly. 
 
    
 
    myAppRouter.navigate(url); 
 
    }, 
 
    
 
    function : initProdLayout() { 
 
    // A Custom Controller object that loads data. 
 
    // Used to Seperate the data load logic from the view. 
 
    var data = myAppController.fetchProdData(); 
 
    
 
    // Creating the instance of the child view. 
 
    var prodView = new ProductView({prod: data}); 
 
    prodView.render(); 
 
    
 
    // Calling router instance's navigate method to update the url  accordingly. 
 
    myAppRouter.navigate(url); 
 
    }, 
 
    
 
    function : render() { 
 
    // Display the root container. 
 
    } 
 
     
 

 
}); 
 

 
var UserView = Backbone.view.extend({ 
 
    
 
    id : "user_container", 
 
    tagName : "div", 
 
    userData : null, 
 
    
 
    function : initialize(options) { 
 
    this.userData = options.users; 
 
    }, 
 
    
 
    function : render() { 
 
    // Invoke the template compiler with the user data and append generated 
 
    // html to the container element for middle layout in the dom. 
 
    } 
 

 
}); 
 

 
var ProductView = Backbone.view.extend({ 
 
    
 
    id : "prod_container", 
 
    tagName : "div", 
 
    prodData : null, 
 
    
 
    function : initialize(options) { 
 
    this.prodData = options.prod; 
 
    }, 
 
    
 
    function : render() { 
 
    // Invoke the template compiler with the user data and append generated 
 
    // html to the container element for middle layout in the dom. 
 
    } 
 

 
});