Question

我无法弄清楚为什么我在app/helpers/shop-name.js创建的助手：

import { helper } from '@ember/component/helper';

export function shopName(shop) {
  return shop.identifier + '-' + shop.name;
}

export default helper(shopName);

不要在模板application.hbs中根据需要格式化值：

<select>
  {{#each model as |shop|}}
    <option value={{shop.id}}>{{shop-name shop}}</option>
  {{/each}}
</select>

我的选择列表中显示undefined-undefined。

如果我直接在模板中进行相同的转化：

<option value={{shop.id}}>{{shop.identifier}}-{{shop.name}}</option>

它可以根据需要运行。这个助手有什么问题？

我正在使用Ember 3.0。谢谢。

Answer 1

我不确定助手是否可以接受不是字符串的输入。我希望有人能证实。

无论如何，使用计算属性

在模型级别更好地处理您的用例

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul class="menu">
    <li><a href="">Home</a></li>
    <li><a href="">Page 1</a></li>
    <li><a href="">Page 2</a>
      <ul class="submenu">
        <li><a href="">Subpage 2a</a></li>
        <li><a href="">Subpage 2b</a></li>
        <li><a href="">Subpage 2c</a></li>
      </ul>
    </li>
    <li><a href="">Page 3</a></li>
  </ul>
</nav>

然后您只需在模板中使用shopName: computed('identifier', 'name', function() { return `${identifier} - ${name}`; })

Answer 2

您的代码中存在多个问题。

shop是一个对象，我打赌它是Ember.Object。如果处理Ember.Object，您应该始终使用get()方法来检索值。这might change soon。由于您未使用get()方法，因此获得undefined。余烬模板引擎正在使用getter，因此帮助器中的shop.identifier和模板中的{{shop.identifier}}之间存在巨大差异。通过shop.get('identifier')或import { get } from '@ember/object'; [...] get(shop, 'identifier');解决问题如果您无法确定shop是Ember.Object的实例，请使用最后一个。
由于您将shop而不是shop.identifier作为参数传递给助手，因此只有shop的引用发生更改（例如替换为其他对象）时才会重新计算帮助程序）。对其属性值的更改不会重新计算帮助程序。

解决问题的一个方法是使用ctcpip建议的计算属性。另一个是concat helper：{{concat shop.identifier '-' shop.name}}。

Ember助手具有未定义的值

2 个答案: