私はEmberを学ぼうとしてきましたが、SOFの他の例に従って、非常に単純なルーティングの例を作成しました。私には3つの見方があります：
ホーム火星木星
言及されたビューを呼び出す/解決する3つのナビゲーションリンクが必要です。私は何が間違っているのかわかりません。まったく出力が得られないようです。誰かが欠点を指摘できれば幸いです。
これがフィドルです：http： //jsfiddle.net/combustion007/PvCk8/
アプリコード：
$(function()
{
App = Em.Application.create({
name: "superman",
init: function(){
alert("APP INIT");
}
})
// APPL
App.ApplicationController = Em.Controller.extend();
App.ApplicationView = Em.View.extend({
templateName: 'application'
});
// NAVBAR
App.NavbarController = Em.Controller.extend();
App.NavbarView = Em.View.extende({
templateName: 'navbar',
classNames: ['']
});
// HOME
App.HomeController = Em.Controller.extend();
App.HomeView = Em.View.extend({
tempalteName: 'home',
classNames: ['']
});
// MARS
App.MarsController = Em.Controller.extend();
App.MarsView = Em.View.extend({
templateName: 'mars',
classNames: ['']
});
// JUPITER
App.JupiterContoller = Em.Controller.extend();
App.JupiterView = Em.View.extend({
templateName: 'jupiter',
classNames: ['']
});
//ROUTER INIT
App.Router = Em.Router.extend({
enableLogging: true,
location: 'hash',
// EVENTS
root: Em.Route.extend({
gotoHome: Ember.Route.transitionTo('home'),
gotoMars: Ember.Route.transitionTo('mars'),
gotoJupiter: Ember.Route.transitionTo('jupiter'),
// STATES
home: Em.Route.extend({
route: '/',
connectOutlets: function(router, context){
router.get('applicationController').connectOutlet('home');
}
}),
mars: Em.Route.extend({
route: '/',
connectOutlets: function(router, context){
router.get('applicationController').connectOutlet('mars');
}
}),
jupiter: Em.Route.extend({
route: '/',
connectOutlets: function(router, context){
router.get('applicationController').connectOutlet('jupiter');
}
}),
})
});
App.initialize();
})
HTML：
<script type="text/x-handlebars" data-template-name="application">
{{view App.NavbarView controllerBinding="controller.controllers.navbarController"}}
<br /><hr />
<div class="content">
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="navbar">
<ul>
<li><a href="#" {{action gotoHome}}>Home</a></li>
<li><a href="#" {{action gotoMars}}>Mars</a></li>
<li><a href="#" {{action gotoJupiter}}>Jupiter</a></li>
</ul>
</script>
<script type="text/x-handlebars" data-template-name="home">
<h2>Home</h2>
<hr />
<br /><br />
</script>
<script type="text/x-handlebars" data-template-name="mars">
<h2>Mars</h2>
<hr />
<br /><br />
</script>
<script type="text/x-handlebars" data-template-name="jupiter">
<h2>Jupiter</h2>
<hr />
<br /><br />
</script>