Backbone.JS에서 중첩 된 뷰 작업

Backbone.JS를 사용하여 메뉴가있는 기본보기 (IndexView), HTML5 비디오 루프 및 내용 (#container) 용 div로 구성된 앱을 개발 중입니다. 아이디어는 앱이 초기화 될 때 경로에 따라보기가 렌더링되어 #container 요소에 표시된다는 것입니다. 경로에 관계없이 항상 IndexView가 표시되어야합니다.Backbone.JS에서 중첩 된 뷰 작업

router.js :

var initialize = function() { 
    // The IndexView will be rendered when the app is initialized 
    console.log("Rendering index view..."); 
    var indexView = new IndexView(); 
    indexView.render(); 

    var app_router = new AppRouter; 

    // One of the routes 
    app_router.on('route:about', function() { 
     var aboutView = new AboutView(); 
     aboutView.render(); 
    }); 

    // Other routes here… 
    Backbone.history.start(); 
}; 

return { 
    initialize: initialize 
};

전망 /하는 index.js :

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'text!templates/index.html' 
], function ($, _, Backbone, indexTemplate) { 
    var IndexView = Backbone.View.extend({ 
     el : $("body"), 
     render : function() { 
      var data = {}; 
      var compiledTemplate = _.template(indexTemplate, data); 
      this.$el.html(compiledTemplate); 
     } 
    }); 

    return IndexView; 
});

전망/about.js :

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'text!templates/about.html' 
], function ($, _, Backbone, aboutTemplate) { 
    var AboutView = Backbone.View.extend({ 
     el : $("#container"), 
     render : function() { 
      var data = {}; 
      var compiledTemplate = _.template(aboutTemplate, data); 
      this.$el.html(compiledTemplate); 
     } 
    }); 

    return AboutView; 
});

를이 내가 가진 무엇

글쎄, 문제는 IndexView가 제대로 렌더링되지만 다른 뷰는 렌더링되지 않는다는 것입니다. 나는 그것이 무엇인가 이유로 IndexView에 의해 생성 된 #container 요소를 보지 않기 때문이라고 생각합니다. 나는 대신 body 엘리먼트에 렌더링 된 뷰가 있다면 잘 처리하기 때문에 이것을 말합니다.

제안 사항? 미리 감사드립니다!

출처

2013-10-02 user1276108

에 전달하는 경로가 제대로 작동 했나요? 코드에서'Backbone.history.start() '를 호출하지 않는 한 t는 아마 그렇지 않을 것이다. –

나는 그것을 부르고 있는데, 나는 여기에 올린 코드에서 버렸다. 그에 따라 게시물을 업데이트했습니다. – user1276108

문제는 el을 지정하는 문장이 조기에 평가된다는 것입니다. 즉, 인덱스 뷰를 렌더링하기 전에 실제 뷰를 만들 때와는 달리 뷰를 정의 할 때 평가됩니다. 당신은 당신이보기를 인스턴스화 또는 수동으로 뷰의 초기화 방법을 지정할 수 있습니다 때 어느 el 전달됩니다해야한다.

예를 들어, el

var myAboutView = new AboutView({el: $('#container')};

출처

2013-10-02 12:29:56 Jack

Backbone.JS에서 중첩 된 뷰 작업

답변

관련 문제