Javascript ember.js显示项目列表，每个项目都有它'；用户自己的视图/控制器

我想要达到的目标： 创建带有视图的控制器，在该视图中我有“库”对象列表。每个项目都有自己的视图和控制器

所有文件都在这里：

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

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

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

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

那么，有没有更好/更干净的方法来实现我的目标

编辑

在按照Michael Grassotti提供的解释进行了所有操作之后，我有了一个奇怪的行为-模板的属性是从itemController获取的，但是{{action}}helper绑定到父控制器。我制作了截图来展示我正在处理的事情

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

在创建{code>{action“deleteGallery”this target=“this”}并单击它之后，我出现了屏幕截图中的错误。在这个时刻，我的想法快用完了

EDIT2:

好吧，我想得太多了，itemController只用于定义计算属性，不用于编写{{action}}处理程序

EDIT3: 我认为itemController和事件目标的问题将得到解决。

我建议你使用一种新的方法

您的

galleriesIndex

模板如下所示：

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

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>

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);
    }
});

# 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.content.name}
{{{#if view.hover}
编辑
删除
{{/if}

我不确定我的代码中是否有错误，我只是复制粘贴并编写它应该是什么样子

关于您看到的

TODO

，这是因为

Ember.CollectionView

实际上需要所有

Ember把手

模块，而不仅仅是它需要的文件，您不应该关心这一点

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

同意。Collection helper仍然有效，但我不确定它是否会成为未来公共api的一部分。如果可以的话，最好使用

{{{each}

帮助程序

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

itemController

属性是一个良好的开端。这是最好的方式，让每个项目都有自己的控制器

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

是的，

{{render}}

辅助程序不是为在

{{each}

块中使用而设计的

那么，有没有更好/更干净的方法来实现我的目标

是的。对于初学者，请使用

itemController

属性。然后，为了给每个对象提供自己的视图，为

{{each helper}

提供一个

itemViewClass

选项。例如：

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

有关详细信息，请参阅的“无块使用”部分

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

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

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);
    }
});

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

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

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

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);
    }
});

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

#图库_索引_item.hbs
{{name}}
{{{#if view.hover}
编辑
删除
{{/if}

---

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

太好了，这正是我想要的，但现在我又把头撞到墙上了。查看：-模板使用来自控制器“omgTest”的属性，但它使用来自父控制器的deleteGallery？Hmmm-查看了上面的编辑。FWIW我同意动作助手应该以您的

itemController

为目标。我会看一看，看看能发现什么我认为这将在下一版本的余烬中修复。感谢Kamil-没有看到这个问题，但同意看起来修复正在进行中。感谢您的回答，但Michael Grassotti提供了更好的答案：）（演示了如何连接每个项目的控制器）我以为您知道这一点，因为您说您确实尝试使用了itemController。总之，@Michael Grassotti的+1，我更喜欢它的答案！