从每个助手调用的组件中的产量

2024-03-03

这是我的组件模板的一部分:

{{#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。

问题是 {{yield}} 在 {{#each}} 帮助器中被调用,并且如果组件声明如下:

{{#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}} 帮助器的上下文。

我能做些什么还是事情就是这样?


UPDATE

现在余烬1.10 http://emberjs.com/blog/2015/02/07/ember-1-10-0-released.html已经落地,引入了一种称为块参数的新语法。所以不需要覆盖_yield方法。例如,在组件的模板内,您可以执行以下操作:

<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}} 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}}

简单的实例 http://emberjs.jsbin.com/sevihivuri/1/edit?html,js,output

当然,您可以使用生成任何变量{{yield name age occupation hobbies}}并使用以下命令将它们捕获到组件中:

{{#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,并更改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() }
      });
    }
  }
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

从每个助手调用的组件中的产量 的相关文章

随机推荐

  • 如何将 Sprite 纹理更改为动画

    我有一个每秒生成的精灵 我不想做的是将精灵纹理更改为动画 并且当它被触摸时它将恢复为正常纹理 public void draw SpriteBatch batch enemyIterator enemies iterator arrayli
  • 我可以选择第 n 个 css 列吗?

    我有一个div有 4 个 CSScolumns我想选择第三列和第四列以使文本稍微变暗 因为文本和文本之间没有很好的对比度background image 这可能吗 我可以接受任何 css 或 js 解决方案 这是demo http jsfi
  • Jfreechart - 多个 XY 图表的任何选项(如多重饼图)?

    有没有类似于 multiPiePlot Chart 但用于 xy 图的东西 我有一个应用程序需要在一页上打印两个或三个 xy 图 我知道您可以将多个数据集放在同一个绘图上 但要求指定每个数据集必须是同一页面上的单独图表 是的 只需添加您的C
  • 无法使用 NGXS 更新存储来修补状态。我不断看到类型错误:无法冻结

    我正在使用一个基本的 Angular 11 应用程序 该应用程序已实现身份验证 使用 AWS Cognito 和 Amplify 我在这里想做的事情非常简单 我正在使用内置的 AWS Amplify 方法进行身份验证 我正在使用 NGXS
  • 如何确保在子任务失败时调用 Celery 和弦回调?

    我在 Celery 中使用 Chord 来进行回调 当一组并行任务完成执行时会调用该回调 具体来说 我有一组函数来包装对外部 API 的调用 我想等待所有这些返回 然后再处理结果并在 Chord 回调中更新我的数据库 我希望回调在所有 AP
  • 在 JSON 响应中编码 HTML 特殊字符的安全优势

    我最近收到第三方的建议 出于安全原因 对所有服务器响应中的 HTML 特殊字符进行编码 所以 gt x27 gt x26 e g id 1 name Miles O x27 Brien 问题 这样做是否能带来安全收益 或者只是一种偏执 gt
  • 是什么让 `async/await` 语句在 ES6 中顺序运行与并行运行?

    我已经浏览过该线程wait Promise all 和多个await 之间有什么区别 https stackoverflow com questions 45285129 any difference between await promi
  • Winform通过活动目录进行用户授权

    我遇到一种情况 在我的应用程序中执行任务之前 我使用以下代码来验证 AD 中的用户成员身份 using System Security Principal WindowsIdentity identity WindowsIdentity G
  • 在 ubuntu 中安装最新版本的 git

    我当前的 git 版本 1 7 9 5 我需要至少升级到 git 1 7 10 才能拥有git clone命令才能正常工作 I tried sudo add apt repository ppa git core ppa用于升级 但结果是这
  • 无法对 MobileFirst Console 6.3 使用 HTTPS

    我在 WAS Liberty 8 5 5 4 上使用 MobileFirst 6 3 我可以通过 HTTP 访问控制台 但无法通过 HTTPS 访问控制台 With HTTP With HTTPS 这是server xml 服务器 xml
  • 如何在 Android 中将 Spannable 转换为 AnnotatedString?

    我有一个使用常规 Android 布局的大型项目 我开始在这个项目上使用 compose 但是 我已经拥有一个大型代码库和许多处理 CharSequence 和 Spannable 的实用程序 例如 返回 Spannable 的货币格式化程
  • 如何让 R 读取我的环境变量?

    我在 EC2 Spot 实例上运行 R 我需要 R 来终止实例并在脚本运行后取消 Spot 请求 为此 我已将 请求 ID 设置为环境变量 bashrc我的计划是在脚本准备好后将以下代码调用到 R 中 system ec2 cancel s
  • 抑制 r 可反应基团聚合中的括号

    我正在使用 R 的可反应包来创建按特定变量分组的数据表 这将显示一个折叠的表格 可以展开该表格以显示子行 折叠的行标题旁边有一组括号 指示下面嵌套了多少个子行 是否可以抑制这组括号使其不显示 这会让我的用户感到困惑 这是一个例子 如果我运行
  • Vaadin 14 中列标题中的文本可以换行到网格中的多行吗?

    在上图中 我有一个Grid https vaadin com components vaadin grid在 Vaadin 14 中创建 请注意列标题 未换行的红线 我试图弄清楚是否有可能 并且安全 简单 标准 让列标签换行 例如 就像在
  • Unicode 字符在 IE6 中以不同大小呈现

    在 Web 应用程序中 我必须显示一个特殊的 unicode 字符 称为BLACK DIAMOND U 25C6 see here http www fileformat info info unicode char 25c6 index
  • 解析 webconfig 时 Windows Azure 间歇性身份错误

    这个问题在发布后似乎是随机发生的 该网站将正常工作然后砰的一声 我在解析 webconfig 时遇到此错误 我只是重新发布 它再次运行得很好 发布时 我选中了删除现有文件的框 这样就不会有垃圾 这是一个使用 net 4 5 和与 Yahoo
  • jQuery:如何判断选项卡/窗口何时获得焦点

    是否有一个事件我可以注册 每次用户单击一个选项卡时都会触发该事件 这意味着他们在我页面的选项卡上 单击另一个选项卡 然后返回我的选项卡 EDIT 我所说的选项卡是指浏览器选项卡 而不是 jQueryUI 选项卡 Matijis 在评论中提供
  • ReportLab:阿拉伯字符显示为黑色方块。

    我尝试了几个星期用阿拉伯语创建 pdf 报告 但失败了 我使用 ReportLab 和两个包来构建阿拉伯字符 即 bidi algorithm 和 arabic reshaper 在控制台中 字符组织良好 但在 pdf 中只有黑色方块 im
  • 为什么 Stream.allMatch() 对于空流返回 true?

    我和我的同事遇到了一个错误 这是由于我们假设空流调用allMatch 会回来false if myItems allMatch i gt i isValid do something 当然 假设而不阅读文档是我们的错误 但我不明白的是为什么
  • 从每个助手调用的组件中的产量

    这是我的组件模板的一部分 each displayResults li class if controller template yield else span class displayHelper controller searchPa