javascript - 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 应用程序，最好明确回答。我可以给出调试模板的策略的一般性答案。

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