11

我正在尝试组合一个简单的主详细信息 Ember 应用程序。一侧是目录树，另一侧是文件列表。

Ember 提供了很少的助手来将上下文渲染到视图中。我可以使用其中哪些：

  1. 目录树的子树。
  2. 详细列表。

事实上，如果有人可以指出我可以阅读的任何文档，了解{{render view}},{{view view}}和{{control view}}helpers 之间的区别以及如何正确使用它们，那将非常有帮助。

非常感谢！

4

3 回答 3

31

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

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

{{control directory}}行为方式与每次渲染时render创建一个新实例的方式相同（与每次都使用相同的控制器实例不同）。App.DirectoryControllerrender

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}}如果您传递模型，现在每次都会创建一个新实例。

于 2013-03-07T09:41:03.353 回答
10

有关帮助程序渲染、部分、出口和模板的非常好的解释，请查看这个问题。

作为一个粗略的总结，如何使用这些助手：

{{render "navigation"}} -> 在这个地方渲染 NavigationController 和 NavigationView。这对于控制器和视图不变的地方很有用，例如导航。

{{outlet "detailsOutlet"}} -> 这将提供一个存根/挂钩/点，您可以在其中渲染组件（控制器 + 视图）。可以将它与路由的渲染方法一起使用。在您的情况下，您可能会有一个看起来像这样的详细信息路线。这会将带有 DetailsView 的 DetailsController 渲染到索引模板的出口“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}}我知道 control 每次使用时都会实例化一个新控制器，但我看不出它适合你，也没有使用它的好例子。

于 2013-03-07T09:48:31.700 回答
2

了解 ember {{render}}、{{template}}、{{view}}、{{control}} 之间的区别

你可以参考这篇文章

http://darthdeus.github.io/blog/2013/02/10/render-control-partial-view/

于 2013-06-25T04:25:35.003 回答