ember.js显示项目列表，每个项目都有自己的视图/控制器 [英] ember.js displaying list of items, each item with it's own view/controller

问题描述

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

所有文件都在这里：

解决方案

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

同意。集合帮助仍然工作，但我不确定它将是公共API的一部分。最好坚持使用 {{each each}} 帮助器，如果可以的话。

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

itemController 属性是一个很好的开始。这是给每个项目自己的控制器的最好方式。

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

是的， {{render}} 帮助器不是设计用于 {{each}} block。

所以，这是一个更好/更干净的方法达到我想要的？

是的。对于初学者，使用 itemController 属性。然后给每个它自己的视图，向 {{each helper}} 提供一个 itemViewClass 选项。例如：

 ＃in galleries_index.hbs 
 {{每个控件itemViewClass =App.GalleriesIndexItemView} 
  

请参阅

然后自定义<$（$ / $）$ / code> 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.gifalt => 
< / a> 
< div class =caption> 
< h4> {{name}}< / h4> 
 {{#if view.hover}} 
< button {{action editGallery this}} class =btn btn-minitype =button> Edit< / button> 
< button {{action deleteGallery this}} class =btn btn-minitype =button> Delete< / button> 
 {{/ if}} 
< / div> 
< / div> 
  

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

What I want to achieve: create controller with view, and in this view I have list of 'Gallery' objects. Each item has it's own view and controller.

All files are here: https://gist.github.com/7e72bb2f532c171b1bf3

It works as intended, after hovering some text is shown/hidden, but personally I think that this it's not so good solution.

I think that I maybe should use {{collection}} helper, but there is no documentation for it on ember.js page (there is some in code, but I'm not sure if this helper is not a little bit outdated, as in source it says "// TODO: Don't require all of this module").

I tried to use itemController property, but then I still have template in one file.

Also tried to use {{render}} helper in {{#each}}, but then it throw error.

So, It is there a better/cleaner way to achieve what I want?

EDIT

After making everything as in explanation provided by Michael Grassotti, I have strange behaviour - property to template is taken fron itemController, but {{action}} helper binds to parent controller. I have made screenshot to show what I'm dealing with.

Basically "this" in itemView points to right controller (itemController) but target property has parent controller.

After making {{action "deleteGallery" this target="this"}} and clicking it, I have error as in screenshot. At this moment, I'm running out of ideas...

EDIT2:

ok, I'm overthinking it, itemController is only for defining computed properties, not for writing {{action}} handlers.

EDIT3: I think that my problem with itemController and event target will be fixed. https://github.com/emberjs/ember.js/issues/1846

解决方案

I think that I maybe should use {{collection}} helper, but there is no documentation for it on ember.js page (there is some in code, but I'm not sure if this helper is not a little bit outdated, as in source it says "// TODO: Don't require all of this module").

Agreed. Collection helper still works but I'm not certain it will be part of the public-api going forward. Best to stick with the {{#each}} helper if you can.

I tried to use itemController property, but then I still have template in one file.

The itemController property is a good start. that's the best way to give each item it's own controller.

Also tried to use {{render}} helper in {{#each}}, but then it throw error.

Yeah the {{render}} helper is not designed for use within an {{each}} block.

So, It is there a better/cleaner way to achieve what I want?

Yep. For starters use the itemController property. Then to give each it's own view, provide an itemViewClass option to the {{each helper}}. For example:

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

See the "blockless use" section of api docs for the each helper for detail.

Then customize App.GalleriesIndexItemView to specify a template:

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

and move html from the each helper to into the template:

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

Now every item has it's own view and controller.

这篇关于ember.js显示项目列表，每个项目都有自己的视图/控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！