Question

我刚刚发现了Ember.js，看起来很有趣。我想创建一个小笔记应用程序来学习如何使用它。

我想到的基本布局是有类别，每个类别都有笔记。对于用户界面，会有一个带有可点击类别的侧边栏，并且该类别的注释将显示在另一侧。

但我无法弄清楚整个模板/布局系统。模板系统本身看起来很简单（类似于Rails视图）。但你怎么做布局？例如，使用Rails，您可以非常轻松地定义布局，然后将各个视图添加到该布局中。对于Ember.js来说，这似乎不清楚。

Answer 1

除了提到的方法 @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);

Answer 2

对于简单的包装式布局，您可以使用Ember的内置layout support。它只支持单个{{yield}}，因此可能对您的应用程序而言太有限了。

对于更强大的内容，请查看ghempton的 Ember Layout 。我认为你会发现它与Rails布局非常相似。他有live example here。

最后，在Ember中创建视图层次结构相当容易（代替使用布局或者除了使用布局之外）。 Tom Dale拥有很多Ember资源和示例here。

使用Ember.js创建Web应用程序

2 个答案: