Emberjs 1.0-pre 라우터가 경로 상태를 찾을 수없고 라우터가 정의되지 않는다고 말합니다.

Question

이 Emberjs router은 jsfiddle Jquery onDomReady와의 작업을 거부하고 오류를 반환합니다. 잡히지 않은 오류 : 어설 션 실패 : "루트" 경로의 상태를 찾을 수 없습니다. 내가 에 onLoad에 jsfiddle의 JQuery와 설정을 변경할 때

그러나, 페이지가로드하지만 라우터는 여전히 알 수없는 것 같습니다 및 라우터의 수동 전환을 할 수있는 모든 시도는 메시지 오류와 함께 실패 '방법을 호출 할 수 없습니다 transitionTo '의 정의되지 않은입니다. 그러나 뷰의 액션 도우미 중 하나를 클릭하여 경로의 점이나 링크를 클릭하면 오류가 발생합니다.

이 문제를 해결하는 방법에 대한 제안 사항을 보내 주시면 대단히 감사하겠습니다.

App = Ember.Application.create({ 
    ready: function(){ 
    App.router.transitionTo('root'); 
    } 
}); 

App.stateFlag = Ember.Mixin.create({ 
    stateFlag: function(name) { 
    var state = App.get('router.currentState.name'); 
    while (state.name === name) { 
     state = state.get('parentState'); 
     console.log('state'); 
     //return true; 
    } 
}.property('App.router.currentState') 
}); 


App.ApplicationController = Em.Controller.extend(); 

App.ApplicationView = Ember.View.extend({ 
    templateName: 'application' 
}); 

App.HomeController = Em.ObjectController.extend(); 
App.HomeView = Em.View.extend({ 
    templateName: 'home' 
}); 

App.LoginController = Em.ObjectController.extend(); 

App.LoginView = Ember.View.extend({ 
    tagName: 'form', 
    templateName: 'logging', 

}); 

App.SectionController = Em.ObjectController.extend(App.stateFlag, { 
    stateFlag: 'sectionA', 
    stateFlag: 'sectionB' 
}); 

App.SectionView = Ember.View.extend({ 
templateName: "sub_section_b_view" 
}); 

App.SectionA = Em.ObjectController.extend(); 
App.SectionAView = Ember.View.extend({ 
templateName: "section A" 
}); 

App.SectionB = Em.ObjectController.extend(); 
App.SectionBView = Ember.View.extend({ 
templateName: "section B" 
}); 

App.Router = Ember.Router.extend({ 
enableLogging: true, 
location: 'hash', 
root: Ember.Route.extend({ 

    anotherWay: Ember.Router.transitionTo('root.logon.index'), 

    showLogin: function(router, event) { 
     router.transitionTo('root.logon.index'); 
    }, 

    doHome: function(router, event) { 
    router.transitionTo('home'); 
    }, 
    doSections: function(router, event) { 
    router.transitionTo('section.index'); 
    }, 

    home: Ember.Route.extend({ 
    route: '/', 
    connectOutlets: function(router, event) { 
     router.get('applicationController').connectOutlet('home'); 
    } 

    }), 

    logon: Ember.Route.extend({ 
     route: '/login', 
     enter: function(router) { 
      console.log("The login sub-state was entered."); 
     }, 
     connectOutlets: function(router, context) { 
     router.get('applicationController').connectOutlet('mine', 'login'); 
     router.get('applicationController').connectOutlet('section'); 
     }, 

     index: Ember.Route.extend({ 
      route: '/', 
      connectOutlets: function(router) { 
       router.get('loginController').connectOutlet('loga', 'login'); 
      } 
     }) 
    }), 

    section: Ember.Route.extend({ 
     route: '/section', 
     connectOutlets: function(router, event) { 
     router.get('applicationController').connectOutlet('section'); 
     }, 

     index: Ember.Route.extend({ 
     route: "/" 
     }),  

     doSectionA: function(router, event) { router.transitionTo('section.sectionA'); 
     }, 

     sectionA: Ember.Route.extend({ 
     route: 'section A', 
     connectOutlets: function(router, context) { 
      router.get('sectionController').connectOutlet('sectionA'); 
      } 

     }), 

     doSectionB: function(router, event) { router.transitionTo('section.sectionB'); 

     }, 

     sectionB: Ember.Router.extend({ 
      route:'section B', 
     connectOutlets: function(router, context) { 
      router.get('sectionController').connectOutlet('sectionB'); 
     } 
     }) 
    }) 
}) 
});​ 

핸들 바 템플릿에 대한 땜질 후

<script type="text/x-handlebars" data-template-name="application"> 
    <h1>Hi samu</h1> 
    {{outlet loga}} 
    {{outlet }} 
    <a href="#" {{action showLogin }}> go to root.logon.index state</a> 
    <br> 
    <a href="#" {{action anotherWay}} >it works to go to root longon index using this</a> 
</script> 

<br> 
<script type='text/x-handlebars' data-template-name='home'> 
</script> 
<br> 
<script type="text/x-handlebars" data-template-name="logging"> 

    {{view Ember.TextField placeholder="what" class="userInput" }} 
    {{outlet loga}} 
<br> 
<b> Inserted from Login controller and view </b> 

</script> 

<script type="text/x-handlebars" data-template-name="sub_section_b_view"> 

    <b>Inserted from the subsection controller and view </b> 

</script> 

<script type='x-handlebars' data-template-name='section A' > 

</script> 


<script type='x-handlebars' data-template-name='section B' > 

</script> 

Answer 1

, 난 모든 작업을 이동합니다. 명명 된 콘센트가 작동하고 중첩 된 하위 경로가 작동합니다. 여기에 작업 jsfiddle입니다. 그 jsfiddle에서, 클릭하면 'root.logon.index state'로 이동합니다. {{outlet loga}}이라는 이름의 콘센트가 제공하는 양식을 렌더링합니다.

이라는 테스트 섹션 링크를 클릭하면 두 개의 하위 섹션에 두 개의 링크가 표시되는 섹션보기가 렌더링되고 그 중 하나를 클릭하면 내용이 렌더링됩니다. 또한 라우터의 각 경로를 여러 클래스 또는 독립 실행 형 클래스로 나누고 라우터 내부에서 해당 클래스를 확장하는 새로운 경로를 작성하여 실제 환경에서 라우터 크기를 줄이기 위해 여러 파일에서 Emberjs 라우터를 분할하는 것을 시뮬레이션했습니다. 작동했습니다.

다음은 전체 코드입니다. 핸들 바 템플릿

<script type="text/x-handlebars" data-template-name="application"> 
    <h1>Hi Laps</h1> 
    {{outlet loga}} 
    {{outlet }} 
    <a href="#" {{action showLogin }}> go to root.logon.index state</a> 
     <br> 
    <a href='#' {{action doSection}}> testing sections</a> 
</script> 

<br> 

<script type='text/x-handlebars' data-template-name='home'> 
</script> 

<br> 
<script type="text/x-handlebars" data-template-name="logging"> 
    {{view Ember.TextField placeholder="what" class="userInput" }} 
    {{outlet loga}} 
    <br> 
    <b> Inserted from Login controller and view </b>  
</script> 

<script type="text/x-handlebars" data-template-name="sub_section_b_view"> 

    <b>Inserted from the subsection controller and view </b> 
    <a href='#' {{action doSectionA}}><p>Sub section yea</p></a> 
    <br> 
    <a href='#' {{action doSectionB}}> our B part yep</a> 

    {{outlet}} 
</script> 

<script type='text/x-handlebars' data-template-name='sectionA' > 
<br> 
<font color="red">my section a is working</font> 
</script> 

자바 스크립트/Emberjs는

App = Ember.Application.create({ 
    ready: function(){ 
    //App.router.transitionTo('root.home'); 
    } 
}); 

App.stateFlag = Ember.Mixin.create({ 
    stateFlag: function(name) { 
    var state = App.get('router.currentState.name'); 
    while (state.name === name) { 
     state = state.get('parentState'); 
     console.log('state'); 
     //return true; 
    } 
    }.property('App.router.currentState') 
}); 


App.ApplicationController = Em.Controller.extend(); 

App.ApplicationView = Ember.View.extend({ 
templateName: 'application' 
}); 

App.HomeController = Em.ObjectController.extend(); 
App.HomeView = Em.View.extend({ 
    templateName: 'home' 
}); 

App.LoginController = Em.ObjectController.extend(); 

App.LoginView = Ember.View.extend({ 
tagName: 'form', 
templateName: 'logging', 
/* class name does not work */ 
className: ['userInput'] 
}); 


App.SectionController = Em.ObjectController.extend(App.stateFlag, { 
    stateFlag: 'sectionB' 
}); 

App.SectionView = Ember.View.extend({ 
    templateName: "sub_section_b_view" 
}); 

App.SectionAController = Em.ObjectController.extend(); 
App.SectionAView = Ember.View.extend({ 
    templateName: "sectionA" 
}); 

App.SectionBController = Em.ObjectController.extend(); 
App.SectionBView = Ember.View.extend({ 
templateName: "sectionB" 
}); 


App.SectionARoute = Ember.Route.extend({ 
    connectOutlets: function(router, context) { 
    router.get('sectionController').connectOutlet({viewClass: App.SectionAView}); 
    }     
}); 

App.SectionBRoute = Ember.Route.extend({ 
connectOutlets: function(router, context) { 
    router.get('sectionController').connectOutlet({viewClass: App.SectionBView}); 
} 
}); 


App.Router = Ember.Router.extend({ 
enableLogging: true, 
location: 'hash', 
root: Ember.Route.extend({ 
    anotherWay: Ember.Router.transitionTo('root.logon.index'), 
    doSection: Ember.Router.transitionTo('root.section.index'), 

    showLogin: function(router, event) {  
     router.transitionTo('root.logon.index'); 
    }, 

    doHome: function(router, event) { 
     router.transitionTo('home'); 
    }, 
    doSections: function(router, event) { 
     router.transitionTo('section.index'); 
    }, 
    home: Ember.Route.extend({ 
     route: '/', 
     connectOutlets: function(router) { 
     router.get('applicationController').connectOutlet('home'); 
     } 

    }), 

    logon: Ember.Route.extend({ 
     route: '/login', 
     enter: function(router) { 
     console.log("The login sub-state was entered."); 
     }, 

     index: Ember.Route.extend({ 
     route: '/', 
     connectOutlets: function(router, context) { 
      router.get('applicationController').connectOutlet('loga', 'login'); 
     } 
     }) 
    }), 

    section: Ember.Route.extend({ 
     route: '/section', 
     doSectionA: Ember.Router.transitionTo('section.sectionA'), 
     doSectionB: Ember.Router.transitionTo('root.section.sectionB'), 

     connectOutlets: function(router, event) { 
       router.get('applicationController').connectOutlet('section'); 
     }, 

     index: Ember.Route.extend({ 
      route: '/'    
     }), 


     sectionA: App.SectionARoute.extend({ 
      route: '/sectionA' 
     }), 

     sectionB: App.SectionBRoute.extend({ 
      route: '/sectionB' 
     })   

    })   

}) 
});