ember.js + 车把:渲染 vs 出口 vs 局部 vs 视图 vs 控制

Posted

技术标签:

【中文标题】ember.js + 车把:渲染 vs 出口 vs 局部 vs 视图 vs 控制【英文标题】:ember.js + handlebars: render vs outlet vs partial vs view vs control 【发布时间】:2013-11-27 17:38:39 【问题描述】:

对每一个都有分散的解释,但我仍然不是 100% 清楚它们的区别和用法。谁能给我一个并排比较?

outlet
outlet NAME
render
partial
view
control

注意:this post 对局部渲染非常有帮助

【问题讨论】:

这将是一个很棒的社区维基。这个主题已经有一个了吗? 【参考方案1】:

它们都是具有以下主要特征的模板助手,如 emberjs 指南中所述。 (http://emberjs.com/guides/templates/rendering-with-helpers/)

1.outlet - 根据路由器确定的路由呈现模板。根据路由使用相应的控制器和视图。 这在基于路由渲染内容时很有用,这是最常见的情况

2.outlet NAME - 提供在路由中指定准确呈现内容的能力。 在尝试从多个模板呈现路线的内容时很有用

3.render - 类似于outlet,但控制器/视图/模型可以直接或间接地从帮助程序中指定。当需要从多个模板呈现内容并能够覆盖上下文(视图/控制器)和模型时很有用。如果指定了模型,它将使用相应控制器的唯一实例,否则它将使用单例实例。 在需要覆盖路由的上下文和模型,同时呈现多个模板内容时很有用

4.control - 像渲染一样工作,除了它为每次调用使用一个新的控制器实例,而不是重用单例控制器。使用render 时,如果不指定模型,则无法对同一路线使用多个渲染,在这种情况下,应使用control有助于为每个呈现的模板内容支持新的控制器实例。

更新:控制助手已被删除https://github.com/emberjs/ember.js/commit/86eecd7ef7cdc7d2ea6f77b3a726b293292ec55d。

5.partial - 将要呈现的模板作为参数,并在适当的位置呈现该模板。它不会改变上下文或范围。它只是将给定的模板放到当前范围内。所以没有为部分指定视图类。 在需要将模板分解为模板模块以实现更好的控制或可重用性时很有用,而无需创建任何视图类

6.view - 这就像部分工作,但提供了一个视图类。视图类指定要使用的模板。 在将模板分解为模块但需要视图类时很有用,例如用于事件处理。

7.#view - 还有视图助手的块形式,它允许指定子视图的模板与父视图模板内联。 (http://emberjs.com/guides/views/inserting-views-in-templates/)

【讨论】:

上面给出的除了github之外的链接已经被删除了,请您提供更新的链接【参考方案2】:

outlet 这定义了嵌套资源/路由将在路由模板中呈现的位置

outlet NAME 这将创建一个命名的插座,您可以在其中以编程方式将某些内容渲染到

App.PostRoute = App.Route.extend(
  renderTemplate: function() 
    this.render('favoritePost',    // the template to render
      into: 'posts',                // the route to render into
      outlet: 'posts',              // the name of the outlet in the route's template
      controller: 'blogPost'        // the controller to use for the template
    );
    this.render('comments', 
      into: 'favoritePost',
      outlet: 'comment',    
      controller: 'blogPost'
    );
  
);

render 有两个参数:

第一个参数描述要设置的上下文 可选的第二个参数是一个模型,如果提供,它将传递给控制器​​

render 做了几件事:

当没有提供模型时,它会获取相应控制器的单例实例 当提供模型时,它会获得相应控制器的唯一实例 使用此控制器呈现命名模板 设置对应控制器的型号

partial 将要呈现的模板作为参数,并在适当的位置呈现该模板(使用当前范围作为上下文)。

view 这个助手像部分助手一样工作,除了提供一个视图类,而不是提供要在当前模板中呈现的模板。视图控制渲染的模板。

control不推荐使用,其工作方式与渲染类似,只是它为每次调用使用新的控制器实例,而不是重用单例控制器。

我只是从他们的文档中复制并粘贴了大部分内容:http://emberjs.com/guides/templates/rendering-with-helpers/

【讨论】:

【参考方案3】:
    render helper 在 v2.x 中已弃用,您需要使用 ember-elsewhere 插件。 https://emberjs.com/deprecations/v2.x/#toc_rendering-into-a-render-helper-that-resolves-to-an-outlet ember.view 在 v1.x 中已弃用,而是使用 Component。参考https://emberjs.com/deprecations/v1.x/#toc_ember-view control helper 只是实验性的,它已经被移除了

我想说目前只鼓励outlet 剩下的一个要么被弃用/被删除。

【讨论】:

【参考方案4】:

主要区别是

view 呈现提供的应该可用的视图类

partial 呈现 Ember.TEMPLATES 中可用的模板。它可能与视图类无关。优点是父视图模板的上下文。

outlet 指定应该在此处渲染提供的视图或模板的路由器,或者根据 renderTemplate() 钩子。

outlet NAME 当你想在不同位置渲染两个视图/模板时很有用。您可以命名插座并要求路由器进行渲染。

render 与插座相同,但您强制路由器呈现特定视图/模板。

【讨论】:

酷,没想到你可以访问Ember.TEMPLATES中的模板列表 是的..所有模板都将在 Ember.TEMPLATES 中结束 @doub1ejack 你也可以使用 Ember 预编译器将把手预编译成 Ember.TEMPLATES

以上是关于ember.js + 车把:渲染 vs 出口 vs 局部 vs 视图 vs 控制的主要内容,如果未能解决你的问题,请参考以下文章

afterRender vs didInsertElement

无法将车把数据导入模板

使用 Ember.js,如何在渲染视图后运行一些 JS?

三大 JS 框架的较量:Angular.js 与 React.js 与 Ember.js

检查一个值是否等于Ember Handlebar中的块助手

EmberJS 从控制器加载视图而不是路由