javascript - ember.js 显示项目列表，每个项目都有自己的 View / Controller

我想要达到的目标:
用 View 创建 Controller ，在这个 View 中我有“画廊”对象的列表。每个项目都有自己的 View 和 Controller 。

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

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

我想我可能应该使用 {{collection}} 助手，但是在 ember.js 页面上没有它的文档(代码中有一些，但我不确定这个助手是否有点过时，因为在源代码中它说“//TODO:不需要所有这个模块”)。

我尝试使用 itemController 属性，但后来我仍然在一个文件中有模板。

还尝试在 {{#each}} 中使用 {{render}} 助手，但随后抛出错误。

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

编辑

在按照 Michael Grassotti 提供的解释完成所有操作后，我有奇怪的行为 - 模板的属性是从 itemController 获取的，但是 {{action}} 助手绑定(bind)到父 Controller 。我制作了屏幕截图以显示我正在处理的内容。

itemView 中的“this”基本上指向右 Controller (itemController)，但目标属性具有父 Controller 。

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

EDIT2:

好吧，我多虑了，itemController 仅用于定义计算属性，而不用于编写 {{action}} 处理程序。

EDIT3:
我认为 itemController 和事件目标的问题将得到解决。
https://github.com/emberjs/ember.js/issues/1846

最佳答案

同意。 Collection helper 仍然有效，但我不确定它是否会成为 public-api 的一部分。如果可以，最好坚持使用 {{#each}} 助手。


itemController 属性是一个好的开始。这是为每个项目提供自己的 Controller 的最佳方式。



是的 {{render}} 助手不是为在 {{each}} 块中使用而设计的。



是的。首先使用 itemController 属性。然后给每个它自己的 View ，为 itemViewClass 提供一个 {{each helper}} 选项。例如:

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

有关详细信息，请参阅 api docs for the each helper 的“无块使用”部分。

然后自定义 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 从 each helper 移动到模板中:

# 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>

现在每个项目都有自己的 View 和 Controller 。