EmberJS模板组件突然不在页面上呈现

Question

我正在关注this Ember教程，突然遇到了一个问题，我的rental-listing.hbs模板组件停止呈现。它始于我开始实施map service时。

我不知道这可能发生在哪里。我已经从我认为相关但无济于事的GitHub repository部分复制了代码。

我有一个rental.hbs模板，看起来像这样：

<div class="jumbo">
  <div class="right tomster"></div>
  <h2>Welcome!</h2>
  <p>We hope you find exactly what you're looking for in a place to stay.</p>
  {{#link-to "about" class="button"}}
    About Us
  {{/link-to}}
</div>
{{outlet}}

又有一个名为rental-listing.hbs的模板组件：

<article class="listing">
  <a
    onclick={{action "toggleImageSize"}}
    class="image {{if this.isWide "wide"}}"
    role="button"
  >
    <img src={{this.rental.image}} alt="">
    <small>View Larger</small>
  </a>
  <div class="details">
    <h3>{{link-to this.rental.title "rentals.show" this.rental class=this.rental.id}}</h3>
    <div class="detail owner">
      <span>Owner:</span> {{this.rental.owner}}
    </div>
    <div class="detail type">
      <span>Type:</span> {{rental-property-type this.rental.category}} - {{this.rental.category}}
    </div>
    <div class="detail location">
      <span>Location:</span> {{this.rental.city}}
    </div>
    <div class="detail bedrooms">
      <span>Number of bedrooms:</span> {{this.rental.bedrooms}}
    </div>
  </div>
  <LocationMap @location={{this.rental.city}}/>
</article>

我在上面添加的唯一内容是<LocationMap @location={{this.rental.city}}/>行，但是如果我删除它，它仍然不起作用。

控制台没有显示任何错误，实际上我可以看到从Mirage获取了我想要的三个虚拟对象：

因此，我肯定会得到这些对象，并且从我所看到的内容中，我正在模板中进行所有必要的操作以呈现它，但事实并非如此。我应该在别的地方找吗？

Answer 1

您是否可以提供示例的链接？通过提到您的余烬应用程序的每个部分，最好明确地回答。我可以给出调试模板的一般方法。

ember.js背后的约定使人们理解“为什么”起初令人沮丧，甚至可能是不透明的。 Ember的车把实现控制使用非常特定的规则在模板内填充和访问值的方式。 Ember视模板（车把文件）是用于路线还是零部件而不同。组件具有隔离的上下文，并且必须通过显式passing in或dependency injection接收值。然后，可以通过使用{{this.somePassedInValue}}访问那些属性来在组件模板中使用这些值。

在super-rentals应用中，租赁索引路由似乎调用了负责显示各个单位的组件。我在app/templates/rentals/index.hbs中找到了这个。

 <li><RentalListing @rental={{rentalUnit}} /></li>

路由模板遍历filteredResults的列表。这些都是rentalUnit。最好的第一步是使用{{log}} helper打印出rentalUnit的值以确保它是您期望的值。

或者，您可以尝试克隆https://github.com/ember-learn/super-rentals并从master分支逐步应用要进行的更改。这样，您可以轻松撤消单个更改，以查看导致某些内容未按预期显示的原因。

Answer 2

<LocationMap @location={{this.rental.city}}/> 
to be written as below
<LocationMap @location={{this.rentals.city}}/>

可能是拼写错误。 在该模板中的相应位置重复此操作。 因为控制台中的型号名称是rentals而不是rental