Ember.js中href属性作用域绑定失效问题求助

Hey there, I see the problem you're facing. The issue is that when you pass href="/fruits/{{fruit.id}}" to your list-item component, Ember isn't parsing the inner {{fruit.id}} expression—it's just passing the literal string "/fruits/{{fruit.id}}" instead of interpolating the fruit's ID. That's why your href isn't resolving to /fruits/1 like you expect.

Here are two easy fixes to get this working:

1. Use the concat helper (compatible with all Ember versions) #

The concat helper is perfect for combining static strings with dynamic values. Update your home.hbs code to use it when passing the href:

<ul>
{{#each fruits as |fruit|}}
  {{list-item href=(concat "/fruits/" fruit.id) item=fruit onitemclick=(action "handleFruitsDetail")}}
{{else}}
  <li>Loading!</li>
{{/each}}
</ul>

This will properly combine "/fruits/" with the fruit.id value to create the correct URL.

2. Use ES6 template literals (Ember 3.10+) #

If you're using Ember 3.10 or newer, you can use template literals directly in your template for cleaner syntax:

<ul>
{{#each fruits as |fruit|}}
  {{list-item href=`/fruits/${fruit.id}` item=fruit onitemclick=(action "handleFruitsDetail")}}
{{else}}
  <li>Loading!</li>
{{/each}}
</ul>

The backticks ` tell Ember to evaluate the ${fruit.id} part as a dynamic value.

Good news—your list-item.hbs template is already correct! The <a href="{{href}}"> line will properly bind the computed href value we're now passing from the parent.

内容的提问来源于stack exchange，提问作者Abraham Gnanasingh