时间戳

首页 > 解决方案 > EmberJS 模板组件突然无法在页面上呈现

javascript - EmberJS 模板组件突然无法在页面上呈现

问题描述

我正在关注这个Ember 教程，但我突然遇到了rental-listing.hbs模板组件停止渲染的问题。当我开始实施地图服务时，它就开始了。

我不明白这可能发生在哪里。我从GitHub 存储库中复制了我认为相关但无济于事的部分代码。

我有一个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 获得了我想要的三个虚拟对象：

返回

所以我肯定得到了对象，从我看到的情况来看，我正在模板中做所有必要的事情来渲染它，但事实并非如此。我应该寻找其他地方吗？

标签： javascriptember.js

解决方案

你能提供你的例子的链接吗？通过拥有您提到的每个 ember 应用程序，最好明确回答。我可以用调试模板的策略给出一个一般性的答案。

ember.js 背后的约定使理解“为什么”起初令人沮丧并且可能不透明。Ember 的车把实现使用非常具体的规则控制如何在模板中填充和访问值。Ember 对模板（车把文件）的处理方式不同，具体取决于它是用于路由还是组件。组件有一个独立的上下文，必须通过显式传入或依赖注入来接收值。然后，您可以通过访问这些属性在组件的模板中使用这些值{{this.somePassedInValue}}。

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

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

路由模板遍历列表filteredResults。这些中的每一个都是rentalUnit. 一个好的第一步是使用{{log}} 帮助器打印出 的值，rentalUnit以确保它符合您的期望。

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

推荐阅读