Ember.js：如何访问CollectionView中的特定项目？ [英] Ember.js: How do I access a specific item in a CollectionView?
问题描述
1 。我想做一些像下面这样显然不起作用的事情：
< a href =/ item / {{content。 id}}>< h3> {{content.name}}< / h3>< / a>
我必须创建一个绑定：
< a {{bindAttr href =url}}>< h3> { content.name}}< / h3>< / a>
如何在视图中创建URL路径？我可以很容易地在模型上创建一个名为url的计算属性，但感觉可怕而且不是很多MVC。我必须为元素创建一个新的视图或注册一个有点麻烦的帮手吗？
这是完整的代码：
App = Ember.Application.create（）;
var sampleData = [Ember.Object.create（{id：'123456789'，name：'John'}），Ember.Object.create（{id：'987654321'，name：'Anne '}）]
App.itemController = Ember.ArrayController.create（{
content：sampleData，
removeItem：function（item）{
this.content。 removeObject（item）;
}
}）;
App.ItemListView = Ember.View.extend（{
itemDetailView：Ember.CollectionView.extend（{
contentBinding：'App.itemController'，
itemViewClass： Ember.View.extend（{
tagName：'li'，
url：''//如何获取'/ item / 123456789'
deleteButton：Ember.Button.extend（{
click：function（event）{
var item = this.get（'content'）;
App.itemController.removeItem（item）;
}
}）
}）
}）
}）;
< script type =text / x-handlebars>
{{#view App.ItemListView}}
< ul id =item-list>
{{#collection itemDetailView}}
< div class =item>
< a {{bindAttr href =url}}>< h3> {{content.name}}< / h3>< / a>
{{#view deleteButton class =btncontentBinding =content}}删除{{/ view}}
< / div>
{{/ collection}}
< / ul>
{{/ view}}
< / script>
2 。我觉得这个观点拥有控制器，而不是相反。视图不应该不知道哪个控制器被挂起，以便您可以重用该视图？我正在考虑这些问题：
contentBinding：'App.itemController'，
和
App.itemController.removeItem（item）;
你如何构建这个？
3 。我意识到一切都是一个正在进行中的工作，而且名称变更相当新鲜，但是所有文件都是不清楚的。示例使用旧的命名空间SC，并且与Sproutcore 2.0指南（例如集合，数组控制器）相比，emberjs.com上缺少很多东西。我读到这里的某个地方，收藏品将被淘汰。谢谢你的帮助和一个非常棒的框架！
>解决方案
1。）如果要使用< a href =...> ，则需要一个计算属性。它可能在你的模型或视图。另一种方法是使用Ember.Button： {{＃查看Ember.Button tagName =atarget =...action =...}} ... {{/ view}}
2。）通常，您需要在模板中声明控件绑定，而不是在视图中。例如： {{＃查看App.ItemListView contentBinding =App.itemController}}
3。） #collection 帮助者可能会被弃用，所以您应该使用 #each 。
First off I want to say that I really like ember.js. I have tried both Knockout and Angular but found them a bit to obtrusive and everything had to be done their way. I feel like ember allows me a bit more freedom to structure things how you see fit. With that said I have a couple of questions.
1. I would like to do something like the following which obviously doesn't work:
<a href="/item/{{ content.id }}"><h3>{{ content.name }}</h3></a>
Instead I would have to create a binding:
<a {{ bindAttr href="url" }}><h3>{{ content.name }}</h3></a>
How do i create the url path in the view? I could easily create a computed property called url on the model but that feels horrible and not very MVC. Do I have to create a new view for the element or register a helper which feels a bit cumbersome?
Here's the complete code:
App = Ember.Application.create();
var sampleData = [ Ember.Object.create({ id: '123456789', name: 'John' }), Ember.Object.create({ id: '987654321', name: 'Anne' }) ]
App.itemController = Ember.ArrayController.create({
content: sampleData,
removeItem: function(item) {
this.content.removeObject(item);
}
});
App.ItemListView = Ember.View.extend({
itemDetailView: Ember.CollectionView.extend({
contentBinding: 'App.itemController',
itemViewClass: Ember.View.extend({
tagName: 'li',
url: '' // HOW TO GET '/item/123456789'
deleteButton: Ember.Button.extend({
click: function(event) {
var item = this.get('content');
App.itemController.removeItem(item);
}
})
})
})
});
<script type="text/x-handlebars">
{{#view App.ItemListView}}
<ul id="item-list">
{{#collection itemDetailView}}
<div class="item">
<a {{ bindAttr href="url" }}><h3>{{ content.name }}</h3></a>
{{#view deleteButton class="btn" contentBinding="content"}}Delete{{/view}}
</div>
{{/collection}}
</ul>
{{/view}}
</script>
2. I feel that the view "owns" the controller and not the other way around. Shouldn't the view be unaware of which controller it is hooked up to so you can reuse the view? I'm thinking about these to lines in the view:
contentBinding: 'App.itemController',
and
App.itemController.removeItem(item);
How do you structure this?
3. I realize everything is a work in progress and quite new with the name change and all but the documentation is quite unclear. The examples use the old namespace SC and there are lot of things missing on emberjs.com compared to the Sproutcore 2.0 guides, for example collections, arraycontrollers. I read somewhere here that collections will be phased out. Is that true and should I use #each instead?
Thanks for your help and for an awesome framework!
1.) If you want to use <a href="...">, you will need a computed property. It could be on your model or on a view. Another technique would be to use Ember.Button: {{#view Ember.Button tagName="a" target="..." action="..."}}...{{/view}}
2.) Typically you'll want to declare your controller binding in the template, rather than in the view. For example: {{#view App.ItemListView contentBinding="App.itemController"}}
3.) The #collection helper will likely be deprecated, so you should probably use an #each instead.
这篇关于Ember.js：如何访问CollectionView中的特定项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
