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

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(使用前将#替换为@)

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

  • Javascript JSON stringify 没有要包含在数据中的数字索引

    我正在尝试通过 JSON 传递非数字索引值 但没有获取数据 var ConditionArray new Array ConditionArray 0 1 ConditionArray 1 2 ConditionArray 2 3 Cond
  • 为什么这个对象的“forEach 不是函数”?

    这可能真的很愚蠢 但我不明白为什么这不起作用 var a cat large a forEach function value key map console log value 未捕获的类型错误 a forEach 不是函数 http j
  • 输入类型货币格式,带逗号和小数位 2

    我只是想问如何制作输入类型文本的货币格式的JavaScript 当您输入数字时 数字是否可能带有逗号 另外 如何使数字固定为 2 个小数 如果我输入 3 位小数 最后一个数字将四舍五入 因此可以是 2 位小数 我有一个仅接受数字的文本框 我
  • 将模板添加为innerHTML 时,Angular 2 绑定/事件不起作用

    我正在尝试创建一个可配置的可重用表 单元格可以配置为具有 html 模板 我正在配置列 Review 拥有带有带有点击事件的锚标记的 html 模板 审核 行 到目前为止 我尝试将此模板作为innerHTML 插入 但所有角度绑定都不起作用
  • 将对象传递给jquery中的回调函数

    我最近正在开发小型聊天模块 该模块需要不断检查服务器是否有新消息 我正在向服务器发送 ajax 请求 服务器将保持连接 直到找到新消息 长轮询 Code var chatController function other variable
  • jqGrid如何将额外的类应用于标题列

    我想在特定列上应用一个额外的类 我知道通过在 colModel 中指定这一点对于行是可能的 但这些类仅应用于 结果行 中的列 而不应用于标题 我想要达到的是通过简单的类名隐藏较小视口的特定列 与 Twitter Bootstrap 一起使用
  • 我可以在 Express POST 请求中进行 DOM 操作吗?

    我正在使用基本的 HTML CSS 前端 目前有一个登陆页面 上面有一个表单 可将 一些数据发送到数据库 当请求完成后 它期待某种响应 在这种情况下 我正在重新渲染页面 但是 我想用某种感谢消息替换表单 以便用户知道它已正确发送 我尝试过简
  • $index 中的 AngularJS 数字

    举例来说 我有以下代码 伪 div index div 结果将是 1 2 3 4 5 6 我怎样才能改变上面的代码以便打印索引 001 002 003 004 005 006 以便索引打印为 3 位数字 您可以使用过滤器轻松完成此操作 首先
  • 我可以检测焦点来源吗? (Javascript、jQuery)

    快速提问 是否可以检测焦点是来自鼠标单击还是来自焦点事件的选项卡 我想如果没有 我将不得不在同一元素上使用单击句柄来确定源 但我更喜欢通过焦点事件的方式 Thanks Gausie 可能无法 100 工作 但如果没有直接的方法 那么你不能直
  • 最有用的 jQuery 原生 API 函数

    前 5 10 个最常用的 jQuery 本机 API 函数是什么 请不要建议 jQuery 函数本身 因为毫无疑问这是最常用的函数 如果可能的话 还请提供它们所涵盖的场景 提出这个问题的原因是我尝试创建一个类似 jQuery 的 API充足
  • JavaScript 附加和前置与 jQuery 附加和前置

    QA Style 我最近读了一篇文章 里面说JavaScript已经实现了append and prepend受 jQuery 启发的方法 这对我来说是一个新知识 因为据我所知 要附加一个元素 我必须使用element appendChil
  • Rails:包括外部 JavaScript

    我想使用 JavaScript 库 例如 jQuery 插件 我是否使用 Rails 资产管道 或者我应该将其包含在 javascript include tag 中 我有哪些选择以及推荐的做法是什么 您会仅在几个页面上还是在整个应用程序中
  • HttpRequest 和 XMLHttpRequest 之间的真正区别

    阅读前注意事项 这不是重复的xmlhttprequest 和 httprequest 之间的区别是什么 https stackoverflow com questions 8499062 what are differences betwe
  • 为什么 useState 会导致组件在每次更新时渲染两次?

    我这里有一段简单的代码 import React useState from react import styles css export default function App const number setNumber useSta
  • RegisterClientScriptCode 在部分回发后不起作用

    以下代码行位于 SharePoint 网站的用户控件中 ScriptManager RegisterClientScriptBlock this this GetType jquery144 false ScriptManager Regi
  • 绑定 Ember TextField 中的计算属性

    我正在尝试将我的数据模型绑定到 Ember js 中的文本字段 该模型有一个表示货币值的字段 例如 1 000 50 然后用户可以更改该值 Ember 接收数字 1000 50 形式的数据 非货币格式 我将视图绑定到具有良好格式的计算属性
  • Angular 计算 HTML 中的百分比

    我试图在 HTML 中显示百分比值 如下所示 td myvalue totalvalue 100 td 它可以工作 但有时它会给出一个很长的小数 这看起来很奇怪 如何四舍五入到小数点后两位 有更好的方法吗 您可以使用过滤器 如下所示杰夫约翰
  • 如何让JS变量在页面刷新后保留值? [复制]

    这个问题在这里已经有答案了 是否可以永久更改 JavaScript 变量 例如 如果我设置变量 X 并使其等于 1 然后按钮的 onClick 将该变量更改为 2 如何使该变量在刷新页面时保持为 2 这是可能的window localSto
  • Bootstrap $('#myModal').modal('show') 不起作用

    我不知道为什么 但所有模态功能都不适用于我 我检查了版本和负载 它们都很好 我不断收到此错误消息 Uncaught TypeError modal is not a function 对于隐藏我已经找到了替代方案 代替 myModal mo
  • Google Hangouts 扩展程序如何创建面板窗口?

    The Doc http code google com chrome extensions windows html说如果你想创建一个面板窗口 你应该使用 chrome windows create type panel function

随机推荐

  • 如何将 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