emberjs.com で以下の説明を読んでいて混乱しました。
以下のコードと同じコードを入力しましたが、説明が示すのと同じ結果にはなりません。
以下の説明は多少省略されていると思いますので、誤解や混乱を招きました。
説明の意味を完全に理解するために、以下に示すのと同じ結果を得るための完全なコードを知りたいです。
以下に示す結果を得るために誰かが完全なコードを見せてくれれば、本当に感謝しています。
どうもありがとうございました！
既に見たように、次のようにハンドルバー式または一連の中かっこで囲むことにより、プロパティの値を出力できます。
私の新しい車は{{color}}です。
これにより、ビューの色のプロパティが検索され、出力されます。たとえば、ビューが次のようになっているとします。
App.CarView = Ember.View.extend({ color: 'blue' });
ビューはブラウザに次のように表示されます。
私の新しい車は青です。
グローバル パスを指定することもできます。
私の新しい車は {{App.carController.color}} です。
ところで、ここに私が試したコードがありますが、上記の説明と同じ結果にはなりません。
/*----------
app.js
----------*/
var App = Ember.Application.create();
App.ApplicationController = Ember.Controller.extend();
App.ApplicationView = Ember.View.extend({
templateName: 'application'
});
App.CarView = Ember.View.extend({
color: 'blue',
templateName: 'car'
});
App.CarController = Ember.Controller.extend();
App.Router = Ember.Router.extend({
root: Ember.Route.extend({
index: Ember.Route.extend({
route: '/'
})
})
})
App.initialize();
/*----------
index.html
----------*/
<script type="text/x-handlebars" data-template-name="application">
<h1>Hello from Ember.js</h1>
</script>
<script type="text/x-handlebars" data-template-name="car">
My new car is {{color}}.<br />
My new car is {{App.carController.color}}.
</script>
編集：
index.html
<script type="text/x-handlebars" data-template-name="application">
<!-- This Works -->
{{#view App.CarView}}
(1)My new car is {{view.color}}.<br />
{{/view}}
<!-- These don't Work -->
(2)My new car is {{view.color}}.<br />
(3)My new car is {{App.CarView.color}}.<br />
(4)My new car is {{App.CarController.color}}.<br />
(5)My new car is {{App.carController.color}}.<br />
<!-- this outlet-area shows what I have in my "car" template -->
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="car">
<!-- This color property is defined in App.CarView.-->
(6)My new car is {{view.color}}.<br />
<!-- This color property is defined in App.CarCotroller.-->
(7)My new car is {{color}}.<br />
<!-- These don't work-->
(8)My new car is {{App.CarCotroller.color}}.<br />
(9)My new car is {{App.carCotroller.color}}.<br />
</script>
app.js
var App = Ember.Application.create();
App.ApplicationController = Ember.Controller.extend();
App.ApplicationView = Ember.View.extend({
templateName: 'application'
});
App.CarController = Ember.ObjectController.extend({
color:'blue'
});
App.CarView = Ember.View.extend({
color:"blue",
templateName: 'car'
});
App.Router = Ember.Router.extend({
root: Ember.Route.extend({
index: Ember.Route.extend({
route: '/',
connectOutlets:function(router){
router.get('applicationController').connectOutlet('car');
}
})
})
})
App.initialize();