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

Question

我刚刚了解到Ember.js，觉得它很有意思。我想创建一个小型笔记应用程序来学习如何使用它。

我想要的基本布局是有分类，每个分类下面可以有笔记。对于用户界面，侧边栏会显示可点击的分类，而该分类下的笔记将在另一侧显示。

但我还无法完全理解整个模板/布局系统。模板系统本身似乎很简单（类似于Rails视图）。但是对于布局，你该怎么做呢？例如，在Rails中，您可以很容易地定义布局，然后将单个视图添加到其中。但这对于Ember.js来说似乎不太清楚。

- user1423402

Answer 1

除了 @rharper 提到的方法，您还可以使用在提交 5a4917b 中引入的 outlet 助手。

您可以在此处找到一个示例 here： Handlebars:

<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);

​

- pangratz

---

在这个例子中，contentView 可以由其他 outlet 组成吗？例如，不同的 contentView 用于应用程序的不同部分（或状态）: ContentView1：{{outlet left}} {{outlet right}} 和 ContentView2：{{outlet list}} {{outlet details}}。 - jrabary

更新后的API文档也很有帮助 http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#method_outlet - mspisars

Answer 2

对于简单的包装器样式布局，您可以使用Ember内置的布局支持。它仅支持单个{{yield}}，因此可能对您的应用程序过于有限。

如果需要更强大的功能，请查看ghempton的Ember Layout。我认为您会发现它与Rails布局非常相似。他在这里提供了一个实时示例。

最后，使用Ember创建视图层次结构（而不是或除了使用布局）相当容易。Tom Dale拥有一系列良好的Ember资源和示例在这里。

- rharper