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

​

Answer 2

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

对于更强大的东西，请查看 ghempton 的Ember Layout。我想您会发现它与 Rails 布局非常相似。他在这里有一个活生生的例子。

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