Question

您好我尝试制作一个简单的余烬应用程序，它从json文件中获取信息。应用位于此处：http://www.autoroben.nl/m/。问题是我需要ember视图返回一个id（来自li元素）我需要的把手。所以我可以使用与汽车列表相同的jsonfile弹出汽车信息。

// MODAL
App.OpenModal = Ember.View.extend({
  click: function(evt) {
    var id = $(".lijst li").attr('id');
    alert(id)
    $('#modal').addClass('active');
  }
});

模板

  <script type="text/x-handlebars" id="index">
  <header class="bar bar-nav">
    <h1 class="title">AUTOROBEN</h1>
  </header>
  <div class="content">
    <ul class="table-view lijst">
    {{#each}}
    <li class="table-view-cell media" id="{{unbound ID}}">
        {{#view App.OpenModal}}
            <img src="/wp-content/uploads/{{unbound featured_image.attachment_meta.file}}" class="media-object pull-left" width="80">
            {{title}}
            <p>{{autoinfo.details.bouwjaar}} | {{autoinfo.details.kmstand}}</p>
        {{/view}}
      </li>
    {{/each}}
    </ul>
  </div>


   <div id="modal" class="modal">
      <header class="bar bar-nav">
        {{#view App.CloseModal}}
        <a class="icon icon-close pull-right nostyle" href="#"></a>
        {{/view}}
        <h1 class="title">{{title}}</h1>
      </header>

      <div class="content">
        <ul class="table-view">
          <li class="table-view-divider">DETAILS</li>
          <li class="table-view-cell">bouwjaar: {{autoinfo.details.bouwjaar}}</li>
          <li class="table-view-cell">kmstand: {{autoinfo.details.kmstand}}</li>
        </ul>     
     </div>
    </div> 
  </script>

json文件：

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return Ember.$.getJSON('http://www.autoroben.nl/wp-json/posts/?type=autos');
  }
});

Answer 1

默认情况下，ember js中的视图将父上下文作为自己的上下文。在您的情况下，它是每个帮助器中单个项的上下文。您可以使用以下代码从视图中访问ID。

App.OpenModal = Ember.View.extend({
  tagName: 'li',
  classNames: ['table-view-cell', 'media'],
  click: function(evt) {
    alert(this.get('context.ID'));
    $('#modal').addClass('active');
  }
});

Here is a working bin.

如何制作带有id的余烬模态？

1 个答案: