使用Ember.js创建Web应用程序 [英] Creating Web applications with Ember.js

问题描述

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

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

但是我可以'很清楚整个模板/布局系统。模板系统本身看起来很简单（类似于Rails视图）。但是你在做什么布局呢？以Rails为例，您可以轻松地定义布局，然后添加单个视图。这对Ember.js来说似乎不清楚。

解决方案

除了提到的方式 @rharper 也可以使用在$ 中引入的插件 5a4917b 。

您可以在此处找到示例：

Handlebars ：

 < script type =text / x-handlebarsdata-template-name =main> 
主视图
 {{outlet contentView}} 
 {{outlet footerView}} 
< / script> 
  

JavaScript ：

  App.viewController = Ember.Object.create（{
 footerView：Ember.View.create（{
 templateName：'页脚'
}），
 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）; 
  

I've just found out about Ember.js, and it looks interesting. I'd like to create a small notes app to learn how to use it.

The basic layout I have in mind is to have categories, and each category can have notes. For the UI, there would be a sidebar with the categories which will be clickable, and the notes for the category will be displayed on the other side.

But I can't quite figure out the whole template/layout system. The template system itself seems simple enough (similar enough to Rails views). But what do you do for layouts? With Rails for example, you can define layouts quite easily and then the individual views are added to that. This seems unclear to me with Ember.js.

解决方案

Besides the approaches @rharper mentioned, you can also use the outlet helper, wich has been introduced in commit 5a4917b.

You can find an example 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);

​

这篇关于使用Ember.js创建Web应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！