使用Ember.js创建Web应用程序
问题描述:
我刚刚了解到Ember.js,它看起来很有趣。我想创建一个小笔记应用程序来学习如何使用它。使用Ember.js创建Web应用程序
我想到的基本布局是有类别,每个类别都可以有笔记。对于用户界面来说,会有一个可以点击的类别的边栏,而类别的注释将显示在另一边。
但我不能完全弄清楚整个模板/布局系统。模板系统本身看起来很简单(与Rails视图相似)。但你对布局做什么?以Rails为例,您可以很容易地定义布局,然后将各个视图添加到该布局中。 Ember.js对我来说似乎还不清楚。
答
对于简单的包装式布局,您可以使用Ember的内置layout support。它仅支持一个{{yield}}
,因此可能对您的应用程序太有限。
对于一些更强大的东西看看ghempton的Ember Layout。我想你会发现它非常类似于Rails布局。他有一个live example here。
最后,在Ember中创建视图层次结构相当简单(代替或除了使用布局外)。汤姆戴尔有一个很好的收集Ember资源和例子here。
答
除了方法@rharper提到,您还可以使用outlet
帮手,至极已经介绍了提交5a4917b。
你可以找到一个例子here:
把手:
<script type="text/x-handlebars" data-template-name="main" >
Main View
{{outlet contentView}}
{{outlet footerView}}
</script>
的JavaScript:
App.viewController = Ember.Object.create({
footerView: Ember.View.create({
templateName: 'footer'
}),
contentView: Ember.View.create({
templateName: 'content'
})
});
Ember.View.create({
controllerBinding: 'App.viewController',
templateName: 'main'
}).append();
Ember.run.later(function(){
App.viewController.set('contentView', Ember.View.create({
templateName: 'new-content'
}));
}, 1000);
在这个例子中可以OUTL et contentView由另外的网点组成?例如,针对应用程序的不同部分(或状态)的不同contentView:ContentView1:{{left}} {{outlet}}和ContentView2:{{outlet list}} {{outlet details}}。 – jrabary
更新后的API文档也很有用http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#method_outlet – mspisars