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

Question

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

我想到的基本布局是有分类，每个分类都可以有注释。对于 UI，将有一个带有可单击类别的侧边栏，并且类别的注释将显示在另一侧。

但我无法弄清楚整个模板/布局系统。模板系统本身看起来很简单（与 Rails 视图很相似）。但是你为布局做了什么？以 Rails 为例，您可以很容易地定义布局，然后将各个视图添加到其中。Ember.js 对我来说似乎不清楚。

Answer 1

除了@rharper提到的方法之外，您还可以使用outlet帮助程序，它已在提交5a4917b中引入。

你可以在这里找到一个例子：

车把：

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

​</p>

Answer 2

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

如需更强大的功能，请查看 ghempton 的Ember 布局。我想你会发现它与 Rails 布局非常相似。他在这里有一个活生生的例子。

最后，在 Ember 中创建视图层次结构相当容易（代替或除了使用布局之外）。Tom Dale在这里收集了大量的 Ember 资源和示例。