在每个帮助器中调用的组件中的yield [英] yield in component that is called from an each helper
问题描述
这是我组件模板的一部分:
This is part of my component's template:
{{#each displayResults}}
<li {{action addSelection this}} {{bindAttr class=\":result active\"}}>
{{#if controller.template}}
{{yield}}
{{else}}
<span class=\"result-name\">{{displayHelper controller.searchPath}}</span>
{{/if}}
<\/li>
{{/each}}
我希望用户能够自定义html
I want the user to be able to customise the html that is used to display the results.
问题是{{yield}}在{{{e ++}}助手中被调用,如果组件是声明如下:
The problem is that the {{yield}} is called while in an {{#each}} helper and if the component is declared like this:
{{#auto-suggest source=controller.employees destination=controller.chosenEmployees}}
<span class=\"result-name\"><img src="img/small_avatar.png"/>{{fullName}}</span>
{{/auto-suggest}}
然后{{#auto -suggest}}在组件中没有{{#each}}帮助器的上下文。
Then the block between the {{#auto-suggest}} does not have the context of the {{#each}} helper in the component.
有什么我可以做的还是这样呢是
Is there anything I can do or is this just the way it is?
推荐答案
更新
现在 ember 1.10 已经降落,引入了一种称为块参数的新语法。所以没有必要重写 _yield
方法。例如,在您的组件模板中,您可以执行以下操作:
Now that ember 1.10 has landed, a new syntax was introduced called block params. So there is no need to override the _yield
method. For instance inside of your component's template you do:
<ul>
{{#each item in source}}
<li>
{{! the component is being used in the block form, so we yield}}
{{#if template.blockParams}}
{{yield item}}
{{! no block so just display the item}}
{{else}}
{{item}}
{{/if}}
</li>
{{/each}}
</ul>
然后当使用组件时,您会得到传递给 {{yield使用
作为| var |
And then when using the component you get the params passed to {{yield}}
using as |var|
{{! no block, the component will just display the item}}
{{auto-suggest source=model as |item|}}
{{! in the block form our custom html will be used for each item}}
{{#auto-suggest source=model as |item|}}
<h1>{{item}}</h1>
{{/auto-suggest}}
当然,你可以使用 {{yield name age occupa hobbies}}
生成任何变量,并在组件中捕获它们:
Of course, you can yield any variables using {{yield name age occupation hobbies}}
and catch them in the component with:
{{#x-foo user=model as |name age occupation hobbies|}}
Hi my name is {{name}}, I am {{age}} years old. Major of the times I am {{occupation}}, but also love to {{hobbies}}.
{{/x-foo}}
对于旧版本
您可以覆盖默认的 _yield
方法, Ember.Component
,并将上下文:get(parentView,'context')
更改为 context:get(view,'context')
。
You can override the default _yield
method, of Ember.Component
, and change the context: get(parentView, 'context')
to context: get(view, 'context')
.
App.AutoSuggestComponent = Ember.Component.extend({
_yield: function(context, options) {
var get = Ember.get,
view = options.data.view,
parentView = this._parentView,
template = get(this, 'template');
if (template) {
Ember.assert("A Component must have a parent view in order to yield.", parentView);
view.appendChild(Ember.View, {
isVirtual: true,
tagName: '',
_contextView: parentView,
template: template,
context: get(view, 'context'), // the default is get(parentView, 'context'),
controller: get(parentView, 'controller'),
templateData: { keywords: parentView.cloneKeywords() }
});
}
}
});
这篇关于在每个帮助器中调用的组件中的yield的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!