当我在 emberjs.com 上阅读下面的解释时,我感到困惑。
我输入了与下面的代码相同的代码,但它没有给我与解释所示相同的结果。
我认为下面的解释在某种程度上被省略了,让我产生了误解和困惑。
我想知道完整的代码以获得下面显示的相同结果,以完全理解解释的含义。
如果有人可以向我展示完整的代码以获得如下所示的结果,我真的很感激。
非常感谢你!
正如您已经看到的,您可以通过将属性的值包含在 Handlebars 表达式或一系列大括号中来打印属性的值,如下所示:
我的新车是{{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>
编辑:
索引.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>
应用程序.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');
}
})
})
})
应用程序.initialize();