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

Question

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

例如

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

这是最明确的方法，但当您 add/remove 将新项目添加到设置哈希时，它很脆弱。

您可以创建一个助手来覆盖参数：

{{#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。如果您有 bar 组件的兄弟，它们也会使用 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"))
        }}

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

How to modify an object hash's value in a template?

handlebars.js

ember.js