ember.js显示项目列表,每个项目都有自己的视图/控制器

Question

我想要实现的目标:使用视图创建控制器,在此视图中我有"Gallery"对象列表.每个项目都有自己的视图和控制器.

所有文件都在这里:https://gist.github.com/7e72bb2f532c171b1bf3

它按预期工作,在悬停一些文本后显示/隐藏,但我个人认为这不是那么好的解决方案.

我想我可能应该使用{{collection}}帮助器,但是在ember.js页面上没有它的文档(代码中有一些,但我不确定这个帮助器是不是有点过时了,如在源代码中它说"// TODO:不要求所有这个模块").

我试图使用itemController属性,但后来我仍然在一个文件中有模板.

还尝试在{{#each}}中使用{{render}}帮助器,但随后它会抛出错误.

那么,有没有更好/更清洁的方式来实现我想要的？

编辑

在完成Michael Grassotti提供的解释之后,我有一些奇怪的行为 - 从itemController获取属性到模板,但是{{action}} helper绑定到父控制器.我制作了截图以显示我正在处理的内容.

基本上,itemView中的"this"指向右控制器(itemController)但目标属性具有父控制器.

制作{{action "deleteGallery" this target="this"}}并单击后,我在屏幕截图中出现错误.此刻,我的想法已经不多了......

EDIT2:

好吧,我正在思考它,itemController仅用于定义计算属性,而不是用于编写{{action}}处理程序.

编辑3: 我认为我的itemController和事件目标的问题将得到修复. https://github.com/emberjs/ember.js/issues/1846

Answer 1

我想我可能应该使用{{collection}}帮助器,但是在ember.js页面上没有它的文档(代码中有一些,但我不确定这个帮助器是不是有点过时了,如在源代码中它说"// TODO:不要求所有这个模块").

同意.收集帮助仍然有效,但我不确定它将成为公众api前进的一部分.{{#each}}如果可以,最好坚持帮助.

我试图使用itemController属性,但后来我仍然在一个文件中有模板.

该itemController物业是一个良好的开端.这是给每个项目自己的控制器的最佳方式.

还尝试在{{#each}}中使用{{render}}帮助器,但随后它会抛出错误.

是的,{{render}}帮助器不是设计用于{{each}}块内.

那么,有没有更好/更清洁的方式来实现我想要的？

是的.首先,请使用itemController酒店.然后给每个人自己的视图,提供一个itemViewClass选项{{each helper}}.例如:

# in galleries_index.hbs
{{each controller itemViewClass="App.GalleriesIndexItemView"}

有关详细信息,请参阅每个帮助程序的api文档的"无块使用"部分.

然后自定义App.GalleriesIndexItemView以指定模板:

App.GalleriesIndexItemView = Ember.View.extend({
    templateName: "galleries_index_item",
    tagName: 'li',
    classNames: ['span4'],
    hover: false,
    mouseEnter: function() {
        this.set('hover', true);
    },
    mouseLeave: function() {
        this.set('hover', false);
    }
});

并将html从每个帮助器移动到模板中:

# galleries_index_item.hbs
  <div class="thumbnail">
      <a href="#">
          <img src="images/300x200.gif" alt="">
      </a>
      <div class="caption">
          <h4>{{name}}</h4>              
          {{#if view.hover}}
              <button {{action editGallery this }} class="btn btn-mini" type="button">Edit</button>
              <button {{action deleteGallery this}} class="btn btn-mini" type="button">Delete</button>
          {{/if}}
      </div>
  </div>

现在每个项目都有自己的视图和控制器.