如何从另一个组件/帮助器渲染?

时间:2015-08-26 11:39:01

标签: ember.js

我有render-component(source),用于从控制器字段渲染组件/帮助器。它适用于ember 1.9.1,但在更新为ember 1.12.1后,我发现了API的变化。在updating code之后我恢复了简单的情况(比如某个属性的名称渲染视图)。但功能的最大部分仍然存在。

我很有意思,在哪里可以阅读更多关于

等内容的信息
  • env(使用内部组件/帮助器内部实现)

  • 变形(我知道它是html-bars的一部分,但我对更多文档感兴趣)

  • 挂钩?

任何人都可以分享创建此类助手的经验吗?或者在这种情况下找到解决方案的方法? (我的意思是这些事情没有完整记录)

P.S。我知道来自ember 1.11的component-helper - 但它不允许渲染助手(使用params)并使用它我应该在模板中定义所有属性。当组件/帮助器的名称是动态的 - 我应该传递不同的参数/属性。

提前谢谢

P.P.S

我希望使用我的帮助程序恢复的一些功能示例(您可以在帮助页面找到更多示例和动机 - 我只是希望我的帮助程序和内置组件帮助程序之间存在差异):

{{#render-component componentName _param='btn-component' action="addSection"}}
{{render-component 'pluralize-component' ___params=hash}} // hash = { count:ungrouped.content.meta.total, single:"Object"}
{{#render-component 'componentName' _param=paramName someOption=someOptionValue}}

3 个答案:

答案 0 :(得分:5)

你在这里有很多问题,但要回答你标题中的问题:Ember 1.11引入了允许你动态渲染组件的component helper

In instantiation of ‘llvm::PredIterator<Ptr, USE_iterator>::reference llvm::PredIterator<Ptr, USE_iterator>::operator*() const [with Ptr = llvm::BasicBlock; USE_iterator = llvm::Value::use_iterator_impl<llvm::Use>; llvm::PredIterator<Ptr, USE_iterator>::reference = llvm::BasicBlock*]’:LLVMTC.cpp:1489:31:  
required from here /usr/local/include/llvm/Support/CFG.h:56:5: error: ‘const class llvm::Value::use_iterator_impl<llvm::Use>’ has no member named ‘atEnd’
 assert(!It.atEnd() && "pred_iterator out of range!");

答案 1 :(得分:3)

This article包含了可能用于实现我认为之后的大部分信息(与标准组件助手相比)。

他们建议的一个值得注意的开箱即用解决方案是使用(几乎弃用的dynamic-component addon

{{dynamic-component
  type=theType
  boundProperty=foo
  staticProperty="bar"
  onFoo="fooTriggered"
}}

希望这(以及文章中的其他建议)引导您走向解决方案。

答案 2 :(得分:0)

我一直在寻找答案,最后找到了解决方案。

我的场景是我想将一个组件传递给另一个组件并在该组件内部进行渲染,这听起来就像这个问题的目标。

对于那些不清楚{{component}}助手如何工作的人:

使用它来渲染另一个组件  {{component "component-name" param1="value" param2="value"}}

这与以下方式完全相同:
 {{component-name param1="value" param2="value"}}

对于我的情景,我这样做了:

在调用第一个组件的模板中:
 {{my-comp-1 comp=(component "my-comp-2" param1="value" param2="value") other-param="value"}}

my-comp-1的模板中,使用用于组件的属性:
 {{component comp}}

这就是我需要做的全部。

这与Ember 2.7.0一样完美。