时间戳

首页 > 解决方案 > 如何修改模板中的对象哈希值？

ember.js - 如何修改模板中的对象哈希值？

问题描述

如何在组件使用对象settings.color之前声明使用把手语法或 Ember.js 助手的新值？settingsbar

例如。

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

标签： ember.jshandlebars.js

解决方案

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

  1. 您可以公开所有参数并构建新的设置对象：
{{#foo color="blue" size=16 as |settings|}}
  {{bar settings=(hash size=settings.size x=settings.x y=settings.y color="red")}}
{{/foo}}

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

  1. 您可以创建一个助手来覆盖参数：
{{#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)
}

这样会更安全。

推荐阅读