init 함수에서 여러 뷰를로드하면 하나가 깨집니다.

Question

첫 번째 backbone.js 앱을 만들고 있는데 내 앱을 초기화하고 둘 다 요리법과 쇼핑 목록을 표시하려고 할 때 문제가 발생했습니다. 다른 (아직 관련) 백본 객체입니다. 나는 쇼핑 목록보기를 얻을하지 않습니다

 
     new MyApp.Routers.ShoppingList; 
     new MyApp.Routers.Recipes; 

를 사용할 때

내 init 함수는 난 단지 조리법을 얻을, 이상하게

 
var MyApp= { 
    Models: {}, 
    Views: {}, 
    Routers: {}, 
    Collections: {}, 
    AppView: {}, 
    Init: function() { 
    new MyApp.Views.ShoppingList; 
     new MyApp.Routers.Recipes; 
     Backbone.history.start(); 
    } 
}; 

입니다. 나는 또한 오류가 발생하지 않는다.

쇼핑 목록 라우터

는

 
MyApp.Routers.ShoppingList = Backbone.Router.extend({ 
    routes: { 
     "":    "index", 
     "shopping_list/:id": "show" 
    }, 



    index: function(){ 
      console.log('this'); 
     new MyApp.Views.ShoppingList(); 

    } 
}); 

그래서 내가 이해에서 앱이 라우터를로드하고보기를 표시해야합니다 매우 기본이지만, 그 또는 CONSOLE.LOG을받지 못했습니다.

, 여기 내 '조리법 라우터'---------------의 요청에 따라입니다 --------------

 
MyApp.Routers.Recipes = Backbone.Router.extend({ 
    routes: { 
     "":    "index", 
     "recipes/:id": "show" 
    }, 



    index: function(){ 

     if(!MyApp.RecipeList){ 
     MyApp.RecipeList = new MyApp.Collections.RecipeList; 
     MyApp.RecipeList.page = 1; 
     } else { 
     MyApp.RecipeList.page++; 
     } 
     MyApp.RecipeList.url='/recipes?page='+MyApp.RecipeList.page; 

     MyApp.RecipeList.fetch({ 
      add: true, 
      success: function() { 
       new MyApp.Views.RecipeList({ collection: MyApp.RecipeList}); 
      }, 
      error: function() { 
       new Error({ message: "Error loading documents." }); 
      } 
     }); 


    }, 

    show: function(id){ 
     var recipe = MyApp.RecipeList.get(id); 

     new MyApp.Views.RecipeView({ model: recipe}); 

    }, 
    newRecipe: function(){ 
     new App.Views.Edit({ model: new Recipe() }); 
    }, 

    edit: function(id){ 
     var recipe = new Recipe({ id: id}); 
     recipe.fetch({ 
      success: function(model, resp){ 
       new App.Views.Edit({ model: recipe}); 
      }, 
      error: function(){ 
       new Error({message: "Hey!? Were'd it go? sorry I can't find your recipe"}); 
       window.location.hash = '#'; 
      } 
     }); 
    } 
}); 

----------------- 일부 진행 -----------------------------

내가 틀릴 수도 있지만 라우터의 섹션을 주석으로 처리 할 때 URL이 비어있는 색인이 있기 때문에 문제가 '경로'로 인해 발생할 수 있습니다. 하나의 컨트롤러/라우터에서 '라우트'를 주석 처리하면 다른 컨트롤러/라우터가 표시됩니다. 그들의 네임 스페이스

 
routes{ 
    "recipes" : "recipes" 
}, 

    recipes: function()... 

의 대표성이되도록

나는 경로를 변경했습니다하지만, 난 여전히 표시 올바른 정보를받지 못했습니다. 나는 지금 초기화 함수가 필요한지 그리고 그게 어떻게 보이는지, 심지어 제대로 디버깅을했는지 알아 내려고하고있다.

---------------- ----- 업데이트, 백본을 잘못 사용했습니다 ------------------------ 라우터가 잘못 이해하고 있다고 생각합니다. 컨트롤러처럼 생각하고 있었기 때문에로드시 여러 라우터를 호출했지만 한 번에 하나의 URL 경로 만 요청할 수 있으므로 빈 경로를 가리키는 마지막 페이지 만로드했습니다.

로드 당 하나의 라우터에서만 여러 개의보기를로드하고 있습니다.

Answer 1

보기를 인스턴스화 한 후에도 해당보기를 렌더링하고 DOM에 추가해야합니다.

index: function(){ 
    console.log('this'); 
    var view = new MyApp.Views.ShoppingList(); 
    //you don't have to append to the whole body, but this is just an example 
    $('body').append(view.render().el); 
}