我想要实现的目标: 使用视图创建控制器,在此视图中我有“图库”对象列表。每个项目都有自己的视图和控制器。
所有文件都在这里: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}}处理程序。
EDIT3: 我认为我的itemController和事件目标的问题将得到修复。 https://github.com/emberjs/ember.js/issues/1846
答案 0 :(得分: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 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从每个帮助器移动到模板中:
# 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>
现在每个项目都有自己的视图和控制器。
答案 1 :(得分: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
模块而不仅仅是它需要的文件,您不应该关心它。