{{outlet}},{{view}},{{render}}和{{control}}助手

Question

我正在尝试整理一个简单的主要细节Ember应用程序.一侧是目录树,另一侧是文件列表.

Ember提供了很少的帮助器来将上下文渲染到视图中.我可以用哪一个:

1. 目录树的子树.
2. 详细清单.

事实上,将是非常有益的,如果有人能指出我的任何文档我可以阅读有关的区别{{render view}},{{view view}}和{{control view}}助手以及如何正确地使用它们.

非常感谢!

Answer 1

{{view "directory"}} 在当前控制器的上下文中呈现视图.

{{render "directory"}}在单例的上下文中App.DirectoryView使用模板呈现视图directoryApp.DirectoryController

{{control directory}}行为方式与render仅在App.DirectoryController每次渲染时创建新实例的方式相同(不像render每次都使用相同的控制器实例).

2014年2月18日更新:{{control}}已被删除.

最后两个助手是相对较新的,因此没有太多关于它们的文档.你可以在这里找到{{view}}文档.

现在看看你的用例,我认为你不需要任何这些助手.只需使用嵌套路由和{{outlet}}帮助程序,它应该工作.

App.Router.map(function(){
  this.resource('directories', function() {
     this.resource('directory', { path: '/:directory_id'}, function() {
       this.route('files');
     });
  });
});

您可以按照本指南进行构建.

更新:{{render}}如果您传递模型,现在每次都会创建一个新实例.

Answer 2

有关帮助器渲染的非常好的解释,部分,插座和模板可以看看这个问题.

同样粗略的总结,如何使用这些帮助者:

{{render"navigation"}} - >在此处渲染NavigationController和NavigationView.这是辅助对于控制器和视图不会改变的地方有用,例如导航.

{{outlet"detailsOutlet"}} - >这将提供一个存根/钩子/点,您可以在其中呈现组件(控制器+视图).可以将其与路由的render方法一起使用.在您的情况下,您可能会有一个细节路线,看起来像这样.这会将带有DetailsView的DetailsController呈现到索引模板的outlet'detailsOutlet'中.

App.DetailsRoute = Ember.Route.extend({
  renderTemplate: function() {
    this.render('details', {   // the template/view to render -> results in App.DetailsView
      into: 'index',          // the template to render into -> where the outlet is defined
      outlet: 'detailsOutlet',       // the name of the outlet in that template -> see above
    });
  }
});

{{view App.DetailsView}} - >这将呈现给定视图,同时保留当前上下文/控制器.有人可能会更改上下文,例如使用您的主实体并将其详细信息传递给这样的视图:

{{view App.DetailsView contextBinding ="masterEntity.details"}}

当您想要在子视图中封装组件的某些部分时,这是有用的,它具有自己的自定义逻辑,如操作/事件的处理.

{{control}}我知道控件每次使用时都会实例化一个新的控制器,但我看不到你的适合,也没有一个很好的例子来使用它.