4

我想要实现的目标：创建带有视图的控制器，在这个视图中我有“画廊”对象的列表。每个项目都有自己的视图和控制器。

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

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

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

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

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

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

编辑

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

在此处输入图像描述

基本上 itemView 中的“this”指向右控制器（itemController），但目标属性具有父控制器。

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

编辑2：

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

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

4

2 回答 2

9

我认为我可能应该使用 {{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>

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

于 2013-01-30T21:52:29.350 回答
3

我建议你使用一个Ember.CollectionView.

您的galleriesIndex模板将如下所示：

<div class="container">
    <div class="row">
        <div class="span12">
            {{view App.GalleriesListView contentBinding="this"}}
        </div>
    </div>
</div>

风景：

App.GalleriesListView = Ember.CollectionView.extend({
    classNameBindings: [':thumbnail', ':thumbnails-list'],
    itemViewClass: Ember.View.extend({
        templateName: "galleriesListItem",
        hover: false,
        mouseEnter: function() { this.set('hover', true); },
        mouseLeave: function() { this.set('hover', false; }
    })
});

galleriesListItem模板：

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

我不确定我的代码中没有错误，我只是复制粘贴并写下它的样子。

关于TODO你看到的，这是因为Ember.CollectionView实际上需要所有ember-handlebars模块而不是它需要的文件，你不应该关心这一点。

于 2013-01-30T21:35:53.000 回答