Question

我正在创建一个外观与Google图片搜索类似的应用程序：https://www.google.ca/search?q=vancouver&um=1&ie=UTF-8&hl=en&tbm=isch&source=og&sa=N&tab=wi。

我使用Ember.ListView（http://emberjs.com/list-view/）成功创建了图片列表。我希望有一个列表/详细信息界面，其中详细信息将显示在弹出窗口中（例如在Google中：尝试单击图像）。

这样的模板如：

{{view Ember.ListView contentBinding="model"}}{{outlet}}

会奏效。当我转换到细节时，我可以看到详细信息。但是，详细信息出口应插入可滚动容器中，而不是Ember.ListView之外。我的第一个想法是扩展Ember.ListView，以便在outlet中推送一个充当Ember.ListView的视图：

App.ListView = Ember.ListView.extend({
  itemViewClass: App.ListItemView,
  childViewsWillSync: function() {
    this.removeObject(this.get(this, 'anOutletView'));

    this._super();
  },
  childViewsDidSync: function() {
    var anOutletView = this.get(this, 'anOutletView');

    this._super();

    if (!anOutletView) {
        anOutletView =  App.AnOutletView.create();
        this.set('anOutletView', anOutletView );
    }

    this.pushObject(anOutletView );
  }
});

App.AnOutletView = Ember.View.extend({
  template: Ember.Handlebars.compile('{{outlet}}')
});

我的模板现在是：

{{view App.ListView contentBinding="model"}}

我可以在DOM中看到App.AnOutletView的实例，但是内部没有任何内容呈现。如果这可能会有效，我会感到惊讶！

知道如何在Ember.ListView添加插座吗？任何想法，将不胜感激。

非常感谢

Answer 1

为什么不像这样只为列表项做模板？

<!-- Not expanded -->
{{#if isExpanded}}
    <!-- Expanded -->
{{/if}}

在Ember.ListView中添加插座

1 个答案: