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

Question

我正在关注 this Ember tutorial and I've suddenly run into an issue where my rental-listing.hbs template component stops rendering. It started when I began implementing the 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

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

可能是打字错误。还要在该模板中重复此操作。因为控制台中的模型名称是 rentals 而不是 rental

Answer 2

您能为您的示例提供 link 吗？通过让您提到的 ember 应用程序的每一部分，最好明确回答。我可以给出调试模板的策略的一般性答案。

ember.js 背后的约定使得理解 "whys" 一开始令人沮丧，而且可能不透明。 Ember 的 handlebars 实现控制如何使用非常具体的规则在模板中填充和访问值。 Ember 根据模板（车把文件）是用于路线还是组件，对模板（车把文件）进行不同的处理。组件具有独立的上下文并且必须通过显式 passing in or 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 分支逐步应用您想要进行的更改。通过这样做，您可以轻松撤消单个更改以查看导致某些内容未按预期显示的原因。

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

EmberJS template component suddenly not rendering on page

javascript

ember.js