Question

在settings.color组件消耗settings对象之前，如何使用句柄语法或Ember.js帮助器为bar声明新值？

例如

foo-component.js
    settings: { color: "blue", size: 16, ...many others }
foo-template.hbs
    {{yield settings=settings}}

my-route.hbs
    {{#foo as |settings|}}
        #! How to change `settings.color` to "red" here before passing to bar  ? !#
        {{bar settings=settings}}
    {{/foo}}

例如在散列场景中

foo-template.hbs
    {{yield settings=(hash color=color size=size)}}

my-route.hbs
    {{#foo color="blue" size=16 as |settings|}}
        #! How to change `settings.color` to "red" here before passing to bar ? !#
        {{bar settings=settings}}
    {{/foo}}

Answer 1

我不知道你为什么需要这个，但是如果你需要这个，你可以通过多种方式实现：

您可以公开所有参数并构建新的设置对象：

{{#foo color="blue" size=16 as |settings|}}
  {{bar settings=(hash size=settings.size x=settings.x y=settings.y color="red")}}
{{/foo}}

这是最明确的方法，但是当您向设置哈希中添加/删除新项目时，它很脆弱。

您可以创建一个帮助程序来覆盖参数：

{{#foo color="blue" size=16 as |settings|}}
  {{bar settings=(override settings color="red")}}
{{/foo}}

在替代帮助程序中，您需要执行以下操作：

export function override(params, hash) {
  const obj = params[0]
  setProperties(obj, hash)
  return obj
}

export default buildHelper(override)

但是，这还将更新从上部组件产生的hash。如果您拥有条形组件的同级，则它们还将使用red。因此，您可以考虑创建它的浅表副本。像这样：

export function override(params, hash) {
  const obj = params[0]
  return Object.assign({}, obj, hash)
}

这样会更安全。

Answer 2

我实现了@ykaragol答案的修改版本。

创建了assign助手，该助手为操作创建了清晰的思维模型。

import { helper } from "@ember/component/helper";
import { assign as assignMethod } from "@ember/polyfills";

export function assign(params) {
  return assignMethod({}, ...params);
}

export default helper(assign);

用法：

{{foo-component
            properties=(assign componentProperties barProperties blahProperties (hash onClick="foo" backgroundColor="#000"))
        }}

如何在模板中修改对象哈希的值？

2 个答案: