このEmberjs ルーターは、jsfiddle Jquery onDomReady の使用を拒否し、エラーを返します。キャッチされないエラー: アサーションに失敗しました: パスの状態が見つかりませんでした: "root"。
ただし、jsfiddle jquery 設定をonLoadに変更すると、ページは読み込まれますが、ルーターはまだ認識されていないようで、ルーターを手動で移行しようとすると、メッセージ エラー: Cannot call method 'transitionTo' of undefined で失敗します。しかし、ルートを指している、またはリンクしているビューでアクション ヘルパーの 1 つをクリックすると、エラーがスローされます。
これを解決する方法についての提案は大歓迎です。
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>