模态

Question

这是我的问题：

我要做的是当我点击模型的名字时，我会得到一个模态窗口，显示它的所有属性，如下所示：

然而，当我点击另一个时，它不起作用，没有模态显示，如下：

这是我的index.hbs：

<div class="row" style="text-align:center;">
   {{#each model as |event|}} 

    <div class="col-xs-3 col-md-3">
        <div class="centerBlock">
            <a href="#" class="thumbnail" style="height:180px; width:171px;"></a>
        </div>
      <button type="button" class="btn btn-link" data-toggle="modal" data-target="#{{event.name}}">{{event.name}}</button>
    </div>

       <!-- Modal -->
  <div class="modal fade" id="{{event.name}}" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">{{event.name}}</h4>
        </div>

        <div class="modal-body">
          <p>{{event.location}}</p>
          <p>{{event.roomNumber}}</p>
          <p>{{event.eventDay}}</p>
          <p>{{event.eventTime}}</p>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>

      </div>

    </div>

  </div>
  <!-- End Modal-->
  {{/each}}
</div>

这是我的index.js：

import Ember from 'ember';

export default Ember.Route.extend({
    model() {
        return this.store.findAll('event');

    }


});

我想我的{{#each}}错了，但是我花了大约一个小时就搞错了，我无法理解。

对不起，这是一个非常愚蠢的问题，感谢任何方向！

Answer 1

问题是您的活动名称。您在Yoga Drop-In中有空格，之后您将其用作模态id属性。您无法通过id使用空格来定位模型。您必须使用另一个属性作为modal目标。例如，您可以使用模型name并从中删除所有空格，或者用短划线替换。它会在你这样做之后起作用。